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
- useState
- useEffect => Bài viết này
- useContext => Sắp ra mắt

sử dụnghiệu ứng

Tài liệu chính thức để sử dụngEffect

đối số hàm useEffect

1. Chức năng được thực thi trong vòng đời của thành phần.
2. Mảng giá trị useEffect theo dõi các thay đổi để kích hoạt kích hoạt. Truyền một mảng trống bắt chước các phương thức componentDidMountvà thành phần React dựa trên lớp componentWillUnmount.

Sự mô tả

useEffectđược sử dụng để chạy mã sau mỗi lần (có thể giới hạn kích hoạt chức năng trong một số điều kiện nhất định) thành phần được hiển thị trên màn hình. Có thể sử dụng nhiều phiên bản của useEffecttrong một thành phần, nhưng hãy đảm bảo rằng chúng luôn thực thi theo cùng một thứ tự. 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). useEffectcác chức năng cũng có thể tự dọn dẹp bằng cách trả về một chức năng.

ví dụ

Hiểu cách sử dụng cơ bản và dọn dẹp sau khi thực hiện.

Đoạn mã sau sẽ được thực thi sau mỗi lần kết xuất.

import React, {useEffect} from 'react';

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
});

import React, {useEffect} from 'react';
useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, [props.source]);

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
}, []); // Pass an empty array as the second argument

useEffect(() => {
  // Do some cool stuff
  const greatProp = props.source.greatProp();
  // Clean up after
  return () => {
    greatProp.destruction();
  };
}, []); // Pass an empty array as the second argument

Trang web cá nhân
LinkedIn
Instagram