React: LifeCycle Hook - Day 7

LifeCycle Hooks để có thể thực hiện các hành động phù hợp với các giai đoạn khác nhau của một component trong reactjs. 

Ví dụ:

• Bạn có thể gọi API, khởi tạo state, đăng ký event listener, v.v. khi component được mount vào DOM.
• Bạn có thể cập nhật lại DOM, gọi lại API, thay đổi state, v.v. khi component được cập nhật do props hoặc state thay đổi.
• Bạn có thể dọn dẹp tài nguyên, hủy bỏ event listener, v.v. khi component bị unmount khỏi DOM.

LifeCycle Hooks giúp bạn kiểm soát được trạng thái và hành vi của component, tăng hiệu suất và trải nghiệm người dùng

Có ba giai đoạn chính là mounting, updating và unmounting. Mỗi giai đoạn có những phương thức khác nhau, ví dụ như:

• Mounting: Đây là giai đoạn component được tạo ra và chèn vào DOM. Phương thức componentDidMount được gọi sau khi component được render lần đầu tiên. Bạn có thể sử dụng phương thức này để gọi API, xử lý DOM hoặc thiết lập trạng thái ban đầu.
• Updating: Đây là giai đoạn component được cập nhật khi có sự thay đổi về props hoặc state. Phương thức shouldComponentUpdate cho phép bạn quyết định component có cần render lại hay không1. Phương thức componentDidUpdate được gọi sau khi component được render lại. Bạn có thể sử dụng phương thức này để cập nhật dữ liệu, xử lý DOM hoặc thực hiện các hành động phụ thuộc vào props hoặc state1.
• Unmounting: Đây là giai đoạn component bị gỡ bỏ khỏi DOM. Phương thức componentWillUnmount được gọi trước khi component bị unmount1. Bạn có thể sử dụng phương thức này để hủy bỏ các subscription, timer hoặc xóa các sự kiện.

Tạo component với Lifecycle Hooks

Bây giờ chúng ta sẽ viết một component React sử dụng TypeScript và sử dụng Lifecycle Hooks.
Trong thư mục src, tạo folder components, rồi tạo một file LifecycleComponent.tsx và viết mã sau:

import React, { Component } from 'react';

interface LifecycleComponentProps {}

interface LifecycleComponentState {
  count: number;
}

class LifecycleComponent extends Component<LifecycleComponentProps, LifecycleComponentState> {
  constructor(props: LifecycleComponentProps) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate() {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  handleIncrement = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };

  render() {
    return (
      <div>
        <h3>LifecycleComponent</h3>
      </div>
    );
  }
}

export default LifecycleComponent;

Ở file App.tsx, khai báo LifeCycleHook component

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import { Button, Stack } from "react-bootstrap";
import LifecycleComponent from "./components/LifeCyleHookComponent";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <!--code-->
      <LifecycleComponent />
      ;
    </>
  );
}

export default App;

Kết quả

Component did mount
Component will unmount
Component did mount

Vì sao Component did mount được gọi 2 lần, mình chưa kiểm chứng. Đây là đoạn trên stackOverflow

I experienced my componentDidMount being called twice. I debugged my component tree until I reached the root index. Then, I tried removing the <React.StrictMode> and it worked. componentDidMount was called only once. This is because <React.StrictMode> intentionally invokes certain React lifecycle methods twice, including componentDidMount, to help detect potential issues with the code. <React.StrictMode> is designed to highlight potential problems, such as side effects, and warn about them during development.

ComponentProps và componentState

Người ta thường sử dụng những tên này để chỉ rõ kiểu dữ liệu của props và state trong một component.

Trong React, props (viết tắt của "properties") là dữ liệu đầu vào mà một component cha truyền vào cho component con. Các props là không thể thay đổi (immutable) và dùng để truyền thông tin từ component cha xuống component con.

state là nơi lưu trữ dữ liệu có thể thay đổi bên trong một component. Khi state thay đổi, React sẽ tự động render lại component. state thường được khởi tạo trong constructor của component và được quản lý bằng phương thức setState.