Phản ứng sử dụngEffect theo chiều sâu / sử dụng useEffect?

Tôi đang cố gắng để hiểu sâu useEffectmóc.

Tôi muốn biết khi nào nên sử dụng phương pháp nào và tại sao?

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

useEffect(callback)

Chạy trên mọi thành phần kết xuất.

Thường được sử dụng để gỡ lỗi, tương tự như thực thi cơ thể của chức năng trên mỗi kết xuất:

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

Chạy một lần trên một thành phần gắn kết.

Thường được sử dụng để khởi tạo trạng thái thành phần bằng cách tìm nạp dữ liệu, v.v.

Lưu ý : Các callback được thực hiện sau khi các giai đoạn làm (Được biết đến "Gotcha").

useEffect(callback,[arg])

Chạy về biến đổi của arggiá trị.

"On Change" dùng để so sánh nông với giá trị trước đó arg(so sánh giá trị của argkết xuất trước đó và kết xuất hiện tại, prevArg === arg ? Do nothing : callback()).

Thường được sử dụng để chạy các sự kiện về đạo cụ / thay đổi trạng thái.

Lưu ý: Có thể cung cấp nhiều phụ thuộc: [arg1,arg2,arg3...]

• Hướng dẫn đầy đủ về useEffectDan Abramov
• useEffectAPI .
• Sử dụng hiệu ứng hook - React docs.

Nếu bạn đã quen thuộc với các phương thức vòng đời của lớp React, bạn có thể nghĩ đến việc sử dụngEffect Hook như thành phầnDidMount, thành phầnDidUpdate và thành phầnWillUnmount kết hợp.

1.useEffect không có thông số thứ hai: Điều này được sử dụng khi chúng ta muốn điều gì đó xảy ra khi thành phần vừa được gắn hoặc nếu nó đã được cập nhật. Về mặt khái niệm, chúng tôi muốn nó xảy ra sau mỗi kết xuất.

2.useEffect với các tham số thứ hai là []: Nó được sử dụng khi chúng ta muốn một cái gì đó xảy ra tại thời điểm lắp đặt thành phần, nếu chỉ thực hiện một lần tại thời điểm gắn kết. Nó gần với thành phần quen thuộcDidMount và thành phầnWillUnmount.

3.useEffect với một số đối số được truyền trong tham số thứ hai: Điều này được sử dụng khi chúng ta muốn một cái gì đó xảy ra tại thời điểm khi pramter đi qua, ví dụ. args đã thay đổi trong trường hợp của bạn.

Để biết thêm thông tin. kiểm tra tại đây: https://reactjs.org/docs/hooks-effect.html

3.useEffect với một số đối số được truyền trong tham số thứ hai useEffect (() => {}, [arg])

Nó sẽ chạy trước sau đó nó sẽ chạy lại nếu arg thay đổi

Bạn cũng quên hỏi về sự trở lại bên trong useEffect ... Công dụng của nó để dọn dẹp nó sẽ chạy khi tháo dỡ linh kiện