React Hook 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 phải xây dựng thành phần lớp React. Sử dụng hook, bạn có thể xây dựng các ứng dụng React hoạt động đầy đủ chỉ với các Thành phần chức năng. Không class Example extends React.component {}cần thiết nữa.

Móc cơ bản

Móc hàng ngày cho các trường hợp sử dụng hàng ngày.

React Basic Hooks
- useEffect
- useState => Bài viết này
- useContext => Sắp ra mắt

sử dụngState

Tài liệu chính thức cho useState

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

1. Trạng thái ban đầu

Một mảng chứa hai giá trị.

1. trạng thái gần đây nhất
2. Chức năng cập nhật trạng thái thành giá trị mới

useStatechấp nhận một giá trị ban đầu và trả về hai giá trị: trạng thái gần đây nhất và một hàm để cập nhật trạng thái. Các giá trị được trả về dưới dạng một mảng và thường được đọc bằng cách sử dụng cú pháp phá hủy mảng .

setStatelà một chức năng không đồng bộ, vì vậy điều quan trọng cần lưu ý là có thể mất thời gian để hoàn thành. Đôi khi một trạng thái mới yêu cầu trạng thái trước đó được tính toán. Việc tính toán trạng thái mới dựa trên trạng thái cũ có thể được thực hiện bằng cách chuyển một hàm vào phương setStatethức được cung cấp trong đối số thứ hai ( [1]trong mảng javascript) của mảng được trả về. Điều quan trọng là đảm bảo rằng các chức năng useStatevà useEffectđược thực hiện theo cùng một thứ tự mọi lúc. Nếu các chức năng useStatevà useEffectkhông kích hoạt theo cùng một thứ tự, bạn sẽ có một khoảng thời gian rất tồi tệ (thêm về việc thực hiện đúng thứ tự bên dưới). Trong tính toán chính xác sẽ được trả về khi thứ tự chức năng không được duy trì.

ví dụ

Hiểu useStatecác giá trị trả về.

Đoạn mã sau có thể được thể hiện theo nhiều cách.

// Original
const [state, setState] = useState(initialState);
// Alternative
const returnArray = useState(initialState);
const state = returnArray[0];
const setState = returnArray[1];

const [state, setState] = useState();
console.log(state); // returns undefined

Đổi gấu thành bò.

// Setup initial state as bears
const [state, setState] = useState('bears');
// Set state to bulls
setState('bulls');

Đoạn mã sau sẽ thêm 27 vào trạng thái trước đó.

// Setup
const initialState = 10;
const [state, setState] = useState(initialState);
// Calculate and set new state based off of old state
setState((previousState) => {
  const newState = previousState + 27;
  return newState;
});

Hiểu khởi tạo lười biếng của các biến trạng thái. Giải thích chính thức về React Docs.

const [state, setState] = useState(() => {
  const initialState = slowFunction(props);
  return initialState;
});

Trang web cá nhân
LinkedIn
Instagram