Cách sử dụng useEffect React hook

Tìm hiểu công dụng của hookEffect React hữu ích và cách làm việc với nó!

Kiểm tra của tôiGiới thiệu về React hooksđầu tiên, nếu bạn chưa quen với chúng.

Một móc React mà tôi đôi khi sử dụng làuseEffect.

import React, { useEffect } from 'react'

Một tính năng rất quan trọng của Hooks là cho phép các thành phần chức năng có quyền truy cập vào các hook trong vòng đời.

Sử dụng các thành phần lớp, bạn có thể đăng ký một hàm trêncomponentDidMount,componentWillUnmountcomponentDidUpdatevà những sự kiện đó sẽ phục vụ nhiều trường hợp sử dụng, từ khởi tạo biến đến lệnh gọi API để dọn dẹp.

Hooks cung cấpuseEffect()API. Lời gọi chấp nhận một hàm làm đối số.

Hàm chạy khi thành phần được hiển thị lần đầu tiên và vào mỗi lần kết xuất / cập nhật tiếp theo. Đầu tiên React cập nhật DOM, sau đó gọi bất kỳ hàm nào được chuyển đếnuseEffect(). Tất cả đều không chặn hiển thị giao diện người dùng ngay cả trên mã chặn, không giống như cũcomponentDidMountcomponentDidUpdate, điều này làm cho ứng dụng của chúng tôi hoạt động nhanh hơn.

Thí dụ:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => { const [count, setCount] = useState(0) const [name, setName] = useState(‘Flavio’)

useEffect(() => { console.log(Hi </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> you clicked </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74"> times) })

return ( <div> <p> Hi {name} you clicked {count} times </p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={() => setName(name === ‘Flavio’ ? ‘Roger’ : ‘Flavio’)}> Change name </button> </div> ) }

ReactDOM.render( <CounterWithNameAndSideEffect />, document.getElementById(‘app’) )

Giống nhaucomponentWillUnmountcông việc có thể đạt được bằng cách tùy chọntrở vềmột chức năng từ của chúng tôiuseEffect()tham số:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

useEffect()có thể được gọi nhiều lần, điều này rất tốt để tách logic không liên quan (thứ gì đó cản trở các sự kiện vòng đời của thành phần lớp).

Kể từ khiuseEffect()các hàm được chạy trên mỗi lần render / update tiếp theo, chúng ta có thể yêu cầu React bỏ qua một lần chạy, vì mục đích hiệu suất, bằng cách thêm tham số thứ hai là một mảng chứa danh sách các biến trạng thái cần theo dõi. React sẽ chỉ chạy lại hiệu ứng phụ nếu một trong các mục trong mảng này thay đổi.

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

Tương tự, bạn có thể yêu cầu React chỉ thực thi hiệu ứng phụ một lần (tại thời điểm gắn kết), bằng cách chuyển một mảng trống:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

useEffect()rất tuyệt vời để thêm nhật ký, truy cập API của bên thứ 3 và hơn thế nữa.

Ví dụ trên Codepen:

Xem bútTác dụng phụ của ví dụ React Hooks # 3bởi Flavio Copes (@flaviocopes) trênCodePen.

Tech Wiki Online!