Giới Thiệu Về React Hooks

React Hooks là một công cụ mạnh mẽ giúp các nhà phát triển dễ dàng quản lý trạng thái và các tính năng quan trọng khác của React mà không cần phải sử dụng các thành phần lớp truyền thống. Bài viết này sẽ giúp bạn hiểu rõ về Hooks, cách sử dụng chúng, cùng với các ví dụ minh họa cụ thể để áp dụng trong phát triển ứng dụng Web.

Hooks Là Gì?

Hooks trong React là một khái niệm cho phép kết nối tới các tính năng như trạng thái (state) và các đặc tính vòng đời (lifecycle) từ các thành phần hàm (function components). Hooks không hoạt động trong các thành phần lớp và giúp tận dụng sức mạnh của React một cách hiệu quả hơn.

Tại Sao Nên Sử Dụng Hooks?

• Quản Lý Trạng Thái Dễ Dàng: Hooks giúp bạn quản lý trạng thái của ứng dụng một cách dễ dàng và trực quan hơn.
• Tái Sử Dụng Logic: Bạn có thể dễ dàng tái sử dụng các logic phức tạp qua việc tạo ra các custom Hooks.
• Cú Pháp Đơn Giản: Việc viết mã sạch và ngắn gọn hơn nhờ loại bỏ sự phức tạp ở các thành phần lớp.

Quy Tắc Sử Dụng Hooks

Để sử dụng Hooks một cách hiệu quả, bạn cần tuân theo ba quy tắc cơ bản:

1. Hooks chỉ được gọi trong các thành phần hàm hoặc custom Hooks.
2. Hooks phải được gọi ở cấp cao nhất của thành phần, không được sử dụng bên trong các vòng lặp hoặc điều kiện.
3. Không sử dụng Hooks ở bên trong các hàm điều kiện.

Cách Cài Đặt Hooks Trong Dự Án React

Trước tiên, bạn cần cài đặt React và Babel. Chạy lệnh sau trong terminal:

npm install react react-dom @babel/preset-react --save

Tiếp theo, tạo một dự án React mới bằng các lệnh sau:

npx create-react-app my-app
cd my-app

Sau khi tạo dự án, bạn có thể nhập các Hooks vào các thành phần của mình như sau:

import React, { useState } from 'react';

Các Hooks Cơ Bản Trong React

Một số Hooks phổ biến bạn nên biết:

1. useState: Giúp quản lý trạng thái trong các thành phần hàm.
2. useEffect: Dùng để thực hiện các tác vụ sau mỗi lần render, tương tự như các phương thức vòng đời trong thành phần lớp.
3. useContext: Cho phép truy cập vào các context trong các thành phần hàm.
4. useReducer: Hỗ trợ quản lý trạng thái với logic phức tạp hơn.
5. useCallback và useMemo: Giúp tối ưu hóa hiệu suất ứng dụng bằng cách giảm thiểu render không cần thiết.

Tìm Hiểu Về useState

useState là một React Hook cho phép bạn thêm trạng thái vào các thành phần hàm của mình. Khi bạn sử dụng useState, React sẽ theo dõi giá trị của trạng thái và tự động render lại thành phần khi giá trị này thay đổi.

Cú Pháp Cơ Bản:

const [state, setState] = useState(initialState);

Ví Dụ Sử Dụng useState

Dưới đây là một ví dụ về cách sử dụng useState trong một thành phần checkbox:

import React, { useState } from 'react';

function MyCheckbox() {
  const [liked, setLiked] = useState(true);

  function handleChange(e) {
    setLiked(e.target.checked);
  }

  return (
    <> 
      <label>
        <input type="checkbox" checked={liked} onChange={handleChange} />
        Tôi thích điều này
      </label> 
      <p>Bạn {liked ? 'thích' : 'không thích'} điều này.</p>
    </>
  );
}
export default MyCheckbox;

Làm Thế Nào Để Kiểm Soát Trạng Thái?

Khi người dùng thay đổi trạng thái của checkbox, hàm handleChange sẽ được gọi và cập nhật giá trị liked dựa trên trạng thái của checkbox.

Tìm Hiểu Về useEffect

useEffect là một công cụ mạnh mẽ để quản lý các hiệu ứng phụ trong các thành phần của bạn. Nó cho phép bạn thực hiện các tác vụ như gọi API, đăng ký sự kiện hoặc thay đổi DOM.

Cú Pháp Sử Dụng useEffect:

useEffect(() => { 
  // code to run 
}, [dependencies]);

Ví Dụ Sử Dụng useEffect

Dưới đây là ví dụ minh họa về cách sử dụng useEffect để gọi dữ liệu từ một API:

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

function ExampleComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('Lỗi khi lấy dữ liệu:', error);
        setLoading(false);
      });
  }, []);

  return (
    <div>
      {loading ? (<p>Đang tải...</p>) : (<div><h1>Dữ liệu từ API:</h1><pre>{JSON.stringify(data, null, 2)}</pre></div>)}
    </div>
  );
}
export default ExampleComponent;

Kết Luận

Qua bài viết này, bạn đã tìm hiểu về React Hooks, trong đó có hai hook cơ bản là useState và useEffect. Chúng giúp quản lý trạng thái và các hiệu ứng phụ một cách hiệu quả và đơn giản hơn. Hy vọng với kiến thức này, bạn sẽ phát triển được những ứng dụng React ấn tượng và tối ưu hơn.

Tài Liệu Tham Khảo

• W3Schools về React Hooks
• React Docs: useState
• React Docs: useEffect
  source: viblo