21. Giới Thiệu React Hooks

React Hooks là một tính năng giúp bạn sử dụng các tính năng của React (như state, lifecycle, context, và hơn thế nữa) trong các thành phần hàm thay vì chỉ có thể sử dụng trong các class component. Hooks giúp viết mã ngắn gọn hơn, dễ đọc hơn và dễ bảo trì hơn.

Hooks đã được giới thiệu từ phiên bản React 16.8 và đã tạo ra một cách tiếp cận mới cho việc quản lý trạng thái và tương tác trong ứng dụng React. Dưới đây là một số React Hooks quan trọng:

useState: Hook useState cho phép bạn thêm trạng thái cục bộ vào các thành phần hàm. Nó trả về một cặp giá trị: giá trị trạng thái hiện tại và hàm để cập nhật giá trị đó.

jsx

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect: Hook useEffect cho phép bạn thực hiện các tác vụ liên quan đến lifecycle như khởi tạo, cập nhật và hủy bỏ trạng thái. Nó thay thế cho các phương thức componentDidMount, componentDidUpdate, và componentWillUnmount.

jsx

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, [seconds]);

  return (
    <div>
      <p>Seconds: {seconds}</p>
    </div>
  );
}

useContext: Hook useContext giúp bạn truy cập vào context trong các thành phần hàm. Context là một cách chia sẻ thông tin global giữa các thành phần con mà không cần truyền thông qua các prop.

jsx

import React, { useContext } from 'react';

const MyContext = React.createContext();

function MyComponent() {
  const contextValue = useContext(MyContext);

  return <p>{contextValue}</p>;
}

useReducer: Hook useReducer tương tự như useState, nhưng thay vì quản lý trạng thái đơn giản, nó giúp bạn quản lý trạng thái phức tạp hơn bằng cách sử dụng mô hình “reducer”.
Custom Hooks: Bạn cũng có thể tạo ra các hook tùy chỉnh của riêng bạn để chia sẻ logic giữa các thành phần hàm khác nhau.

React Hooks đã đem lại nhiều cách tiếp cận mới trong việc viết React components và quản lý trạng thái. Tuy nhiên, bạn cũng cần hiểu rõ về cách hoạt động của mỗi hook để sử dụng chúng một cách hiệu quả. Trên đây là Giới thiệu React Hooks.

Leave a Comment Cancel Reply