Chọn móc quản lý nhà nước phù hợp
Nếu bạn muốn tìm một công việc phát triển web, bạn sẽ có cơ hội thành công cao hơn nếu học thư viện React JavaScript. React là một trong những thư viện được sử dụng nhiều nhất trong ngành. Và một trong những tính năng thú vị nhất của thư viện React là khái niệm hook.
Hook đơn giản là các hàm JavaScript cô lập và cho phép bạn sử dụng lại logic trong ứng dụng React. Đối với quản lý trạng thái, có hai hook chính có sẵn cho bạn—the sử dụngState móc và sử dụngReducer cái móc.
Mục Lục
Tổng quan về useState Hook
Các sử dụngState hook là cách phổ biến nhất để xử lý trạng thái trong React. Cú pháp bên dưới minh họa cách sử dụng hook này trong ứng dụng của bạn:
const [state, setState] = useState(initialStateValue);
Trong khối mã ở trên, tình trạng biến giữ dữ liệu trong bộ nhớ giữa các lần hiển thị. Và setState là chức năng “setter” điều khiển tình trạng Biến đổi.
Các sử dụngState hook trả về một mảng có đúng hai phần tử. Nó cũng nhận một giá trị ban đầu cho biến trạng thái.
Ví dụ: nếu muốn xác định một biến trạng thái đại diện cho tuổi của người dùng, với giá trị ban đầu là 17, đây là cách bạn sẽ thực hiện:
const [userAge, setUserAge] = useState(17);
Các setUserAge chức năng chịu trách nhiệm sửa đổi tuổi người dùng biến số đưa ra.
setUserAge(19);
Điều quan trọng cần lưu ý là việc cập nhật trạng thái, kích hoạt kết xuất lại thành phần và cập nhật biến trạng thái không đúng cách có thể dẫn đến một vòng lặp vô hạn có thể phá vỡ mã của bạn.
Trong React, không nên sửa đổi trạng thái trực tiếp (như được hiển thị trong khối mã bên dưới), vì các thay đổi đối với các biến không phải trạng thái không tồn tại giữa các lần hiển thị thành phần.
userAge = 19;
Trạng thái là cục bộ của thành phần xác định nó. Nếu bạn có các thành phần giống nhau được hiển thị nhiều lần trên màn hình, thì mỗi thành phần sẽ có trạng thái độc lập riêng.
function App(){
return (
<div>
<Switch />
<Switch />
</div>
)
}
Trong khối mã ở trên, có hai Công tắc các thành phần, nhưng mỗi thành phần xử lý trạng thái riêng của nó và không dựa vào thành phần khác trừ khi một thành phần chia sẻ trạng thái của nó với thành phần kia.
React xử lý cập nhật trạng thái theo đợt. Điều này có nghĩa là khi bạn gọi hàm setter của biến trạng thái, biến trạng thái không được cập nhật cho đến lần kết xuất lại tiếp theo.
Tổng quan về useReducer Hook
useReducer là một hook React có thể hữu ích bất cứ khi nào bạn muốn xử lý nhiều trạng thái liên quan cùng một lúc. Cú pháp cho sử dụngReducer trông giống như thế này:
const [state, dispatch] = useReducer(reducer, initialState)
So với sử dụngStateTRONG sử dụngReducerđây là một tình trạng biến và một gửi đi chức năng gửi các hành động lên đến bộ giảm tốc chức năng xử lý tải trọng và cập nhật tình trạng.
Ví dụ: giả sử bạn đang xây dựng một ứng dụng bộ đếm đơn giản với các nút có thể đặt lại bộ đếm, tăng giá trị bộ đếm hoặc giảm giá trị bộ đếm. sử dụng sử dụngState mã của bạn sẽ trông giống như thế này:
function Counter(){ const [count, setCount] = useState(0);
return(
<div>
The count is: {count}
<div>
<button onClick={() => setCount(count + 1)}>Increase count</button>
<button onClick={() => setCount(0)}>Reset</button>
<button onClick={() => setCount(count - 1)}>Decrease Count</button>
</div>
</div>
)
}
Việc thực hiện ở trên hoạt động hoàn hảo. Nhưng bạn cũng có thể đạt được kết quả tương tự với sự trợ giúp của sử dụngReducer cái móc.
Ví dụ này chỉ đơn giản là để chứng minh cách sử dụngReducer móc hoạt động. Trong một ứng dụng trong thế giới thực, sử dụngReducer là quá mức cần thiết cho kịch bản này.
sử dụngReducer giúp dễ dàng xử lý các trạng thái liên quan và logic phức tạp dựa trên kiểu thông qua trong công văn hoạt động sự vật.
Ví dụ, chức năng điều phối có thể gửi một hoạt động đối tượng trông giống như thế này:
{type:"action_type", payload:state * 2}
Đầu tiên nhập khẩu sử dụngReducer móc, sau đó xác định bộ giảm tốc chức năng với các tham số: tình trạng và bị phá hủy hoạt động sự vật.
import {useReducer} from "react";function reducer(state, { type, payload }) {
if (type === 'countIncrease') {
return payload;
} else if (type === 'countDecrease') {
return payload;
} else if (type === 'countReset') {
return payload;
} else {
return state;
}
}
Sau khi xác định các bộ giảm tốc chức năng, bạn có thể xây dựng các Quầy tính tiền thành phần với sử dụngReducer cái móc.
function Counter() {
const [count, dispatch] = useReducer(reducer, 0);
return (
<div>
The count is: {count}
<div>
<button onClick={() => dispatch({ type: 'countIncrease', payload: count + 1 })}>
Increase count
</button>
<button onClick={() => dispatch({ type: 'countReset', payload: 0 })}>
Reset count
</button>
<button onClick={() => dispatch({ type: 'countDecrease', payload: count - 1 })}>
Increase count
</button>
</div>
</div>
);
}
Trong khối mã ở trên, nút đầu tiên gửi một hành động thuộc loại đếmTăng với trọng tải là đếm + 1. Hành động này chịu trách nhiệm tăng giá trị đếm.
Nút thứ hai gửi một hành động thuộc loại đếmĐặt lại với tải trọng bằng 0 sẽ đặt lại giá trị đếm về 0.
Nút thứ ba gửi một hành động thuộc loại đếmGiảm với trọng tải là đếm – 1 làm giảm giá trị đếm xuống 1.
Lựa chọn giữa useState và useReducer Hook
Bây giờ, bạn đã hiểu cách sử dụng sử dụngState Và sử dụngReducer móc, điều quan trọng là phải biết khi nào nên sử dụng đúng.
Nếu trạng thái của bạn không yêu cầu logic phức tạp, thì rõ ràng là sử dụng sử dụngReducer có thể là quá mức cần thiết.
Nếu trạng thái của bạn là bất kỳ thứ gì ngoại trừ các nguyên hàm JavaScript như số, chuỗi và giá trị boolean, thì bạn nên sử dụng sử dụngState cái móc. Và nếu loại trạng thái là một đối tượng hoặc một mảng, thì bạn nên cân nhắc sử dụng sử dụngReducer thay vì.
Khi ứng dụng của bạn trở nên phức tạp hơn, sẽ rất khó để xử lý trạng thái chỉ với sử dụngState Và sử dụngReducer móc câu.
Đây là lúc bạn có thể sử dụng các thư viện bên ngoài như Redux, Jotai và Zustand. Các thư viện này giúp xử lý các thay đổi trạng thái trên nhiều thành phần dễ dàng hơn.
Quản lý trạng thái dễ dàng hơn với thư viện JavaScript
Các thư viện như React, Vue và Svelte đều có cách xử lý trạng thái riêng. Tự mình xử lý việc quản lý trạng thái bằng vanilla JavaScript chắc chắn là điều bạn có thể thử, nhưng sẽ dễ dàng và thuận tiện hơn nhiều khi sử dụng thư viện JavaScript đã được thử nghiệm thực chiến.
Nếu bạn đang xây dựng một ứng dụng phức tạp bằng React, nơi bạn cần quản lý một số thành phần, thì Redux có thể là lựa chọn tốt nhất cho bạn.