Nếu bạn mới sử dụng React, bạn có thể thắc mắc React Hooks là gì và khi nào bạn nên sử dụng chúng. React chỉ giới thiệu hook trong bản phát hành 16.8 nhưng chúng đã nhanh chóng trở thành một tính năng thiết yếu của thư viện.
Tìm hiểu tất cả những điều cơ bản về React Hooks và khám phá một số phương pháp hay nhất để sử dụng chúng trong các ứng dụng React của bạn.
React Hooks là gì?
React Hooks cho phép bạn sử dụng trạng thái và các tính năng khác của React mà không cần viết thêm mã. Hooks là một cách tuyệt vời để làm cho mã của bạn dễ đọc và dễ bảo trì hơn.
Có một vài Hook khác nhau trong React, nhưng thường được sử dụng nhất là useState và useEffect. Hook useState cho phép bạn thêm trạng thái vào các thành phần của mình. Điều này hữu ích cho những việc như theo dõi thông tin đầu vào của người dùng hoặc các thay đổi đối với biểu mẫu. Móc useEffect cho phép bạn chạy một hàm bất cứ khi nào một thành phần hiển thị. Điều này hữu ích cho những việc như tìm nạp dữ liệu từ API hoặc thiết lập đăng ký.
Khi nào bạn nên sử dụng React Hooks?
Bạn nên sử dụng React Hooks bất cứ khi nào bạn cần thêm chức năng bổ sung vào một thành phần. Ví dụ: nếu bạn cần theo dõi thông tin đầu vào của người dùng, bạn sẽ sử dụng hook useState. Nếu bạn cần tìm nạp dữ liệu từ một API, bạn sẽ sử dụng hook useEffect. Bạn cũng có thể tạo các móc tùy chỉnh cho các lệnh gọi API.
Nếu bạn mới bắt đầu sử dụng React, bạn có thể chưa cần sử dụng Hooks. Nhưng khi bạn xây dựng các ứng dụng phức tạp hơn, bạn sẽ thấy rằng Hooks là một cách tuyệt vời để thêm chức năng bổ sung vào các thành phần của bạn.
Các phương pháp hay nhất với React Hooks
Bây giờ bạn đã biết React Hooks là gì và khi nào sử dụng chúng, hãy nói về một số phương pháp hay nhất.
1. Chỉ gọi Hooks từ các hàm React
Bạn chỉ nên gọi React Hooks từ các hàm React. Nếu bạn cố gắng gọi các hook phản ứng từ một thành phần lớp, bạn sẽ gặp lỗi.
Điều này là do bạn chỉ có thể gọi một React Hook từ một hàm React. Các hàm React là các thành phần mà bạn khai báo với một từ khóa hàm.
Đây là một ví dụ về một thành phần hàm React:
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Và đây là một ví dụ về một thành phần lớp:
import React, { Component } from 'react';
class App extends Component {
state = {
count: 0
};
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
Ví dụ đầu tiên khai báo thành phần Ứng dụng bằng cách sử dụng từ khóa hàm, trong khi ví dụ thứ hai sử dụng từ khóa lớp.
2. Chỉ sử dụng một lần sử dụng
Nếu bạn đang sử dụng hook useEffect, bạn chỉ nên sử dụng một hook cho mỗi thành phần. Điều này là do useEffect chạy bất cứ khi nào một thành phần hiển thị.
Nếu bạn có nhiều móc useEffect, tất cả chúng sẽ chạy bất cứ khi nào một thành phần hiển thị. Điều này có thể dẫn đến các vấn đề về hiệu suất và hành vi không mong muốn. Trong ví dụ dưới đây, cả useEffects sẽ chạy bất cứ khi nào thành phần Ứng dụng hiển thị.
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('This will run whenever the App component renders!');
}, []);
useEffect(() => {
console.log('This will also run whenever the App component renders!');
}, []);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Thay vì sử dụng nhiều móc useEffect, bạn có thể sử dụng một hook useEffect duy nhất và đặt tất cả mã của bạn vào bên trong nó. Trong ví dụ dưới đây, chỉ một hook useEffect sẽ chạy bất cứ khi nào thành phần Ứng dụng hiển thị.
import React, { useState, useEffect } from 'react';
function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('This will run whenever the App component renders!');
console.log('This will also run whenever the App component renders!');
}, []);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Điều này có nghĩa là bạn chỉ có thể gọi React Hooks từ ví dụ đầu tiên. Nếu bạn cố gắng gọi React Hooks từ ví dụ thứ hai, bạn sẽ gặp lỗi.
3. Sử dụng Hook ở cấp cao nhất
Một trong những phương pháp hay nhất với React Hooks là sử dụng chúng ở cấp cao nhất. Bạn nên tránh sử dụng hook bên trong các vòng lặp, điều kiện hoặc các hàm lồng nhau. Ví dụ: nếu bạn sử dụngState bên trong vòng lặp for, mỗi khi vòng lặp chạy, React sẽ tạo một biến trạng thái mới. Điều này có thể dẫn đến hành vi không mong muốn.
import React, { useState } from 'react';
function App() {
for (let i = 0; i < 10; i++) {
const [count, setCount] = useState(0);
}
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
Trong ví dụ trên, thành phần Ứng dụng sẽ chỉ hiển thị số và nút từ lần lặp cuối cùng của vòng lặp. Điều này là do React chỉ cập nhật biến trạng thái từ lần lặp cuối cùng.
Thay vì sử dụngState bên trong vòng lặp, bạn có thể khai báo một biến trạng thái bên ngoài vòng lặp. Bằng cách này, React sẽ chỉ tạo một biến trạng thái và cập nhật nó cho phù hợp.
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
for (let i = 0; i < 10; i++) {
}
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
4. Đừng lạm dụng Hooks
React Hooks là một công cụ mạnh mẽ, nhưng bạn nên tránh lạm dụng chúng. Nếu bạn thấy mình đang sử dụng nhiều Hook trong mọi thành phần, bạn có thể đang lạm dụng chúng.
React Hooks hữu ích nhất khi bạn cần chia sẻ trạng thái giữa nhiều thành phần. Tránh sử dụng các Hook không cần thiết vì chúng có thể làm cho mã của bạn khó đọc và chúng có thể ảnh hưởng đến hiệu suất nếu được sử dụng quá mức.
Thêm nhiều chức năng hơn bằng cách sử dụng React 18 Hooks
Với việc phát hành React 18, có sẵn các hook mới. Mỗi hook cụ thể cho một tính năng React nhất định. Bạn có thể tìm thấy danh sách tất cả các hook có sẵn trên trang web React. Nhưng hook được sử dụng phổ biến nhất vẫn là useState và useEffect.
