Cách sử dụng React useEffect

Nhóm phát triển tại React đã giới thiệu khái niệm về Hooks trong phiên bản React 16.8. Một React Hook cho phép sử dụng trạng thái và các tính năng khác của React trong một thành phần chức năng. Với hook useState, một thành phần hàm có thể đặt trạng thái bên trong của chính nó mà không cần phải viết lại như một thành phần lớp.

Hãy xem hướng dẫn này để xem xét sự khác biệt trong lớp React và các thành phần chức năng.

Một Hook được sử dụng rộng rãi khác trong React là useEffect. Với useEffect, các tác dụng phụ (hoặc “hiệu ứng”) được thực hiện từ ngữ cảnh của một thành phần chức năng. Hãy nhớ rằng các tác dụng phụ cũng xảy ra trong các hàm JavaScript.

Tác dụng phụ xảy ra khi một chức năng thay đổi thứ gì đó bên ngoài cơ thể của nó. Trong React, nó cũng giống như vậy và có thể bao gồm tìm nạp dữ liệu, đăng ký hoặc thay đổi DOM từ các thành phần React trước đây.

useEffect là gì?

React Hook useEffect cho phép một thành phần chức năng thực hiện các tác dụng phụ. Nó hoạt động theo kiểu tương tự như các phương thức vòng đời componentDidMount, componentWillUpdate và componentWillUnmount trong các thành phần lớp React. Tham khảo phần giới thiệu này về các phương thức vòng đời React để biết thêm chi tiết.

Trong bài viết này, chúng ta sẽ xem một ví dụ cơ bản về cách bắt đầu sử dụng Hooks. Mục đích của bài viết này là để giới thiệu chứ không phải đi sâu. Để có cái nhìn toàn diện về useEffect, hãy đọc tổng quan này khi bạn đã quen với React Hooks.

Cú pháp React Hooks

Để hiểu useEffect, trước tiên chúng ta cần xem qua cú pháp của useState Hook. Khi sử dụng Hook, chúng phải được nhập giống như React được nhập.

import React, { useState, useEffect } from 'react';

Bây giờ chúng ta có thể xác định thành phần chức năng của chúng ta với Hooks bên trong của chúng ta. Điều này đang sử dụng phạm vi chức năng JavaScript. Khi chúng ta xác định useEffect Hook bên trong thành phần chức năng, nó có quyền truy cập vào trạng thái và đạo cụ thông qua phạm vi. Để biết thêm về phạm vi, hãy xem xét với mồi này.

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

cú pháp useState

Để rõ ràng hơn, hãy sử dụng một bộ đếm đơn giản cho ví dụ của chúng tôi. Chúng tôi sẽ xuất ra DOM số lần một nút được nhấp. Thành phần chức năng của chúng tôi hoàn chỉnh với hàng nhập khẩu sẽ trông như thế này:

import React, {useState, useEffect} from 'react'
import ReactDOM from 'react-dom'

  const ButtonCounter = () => {
    return (
      <button>Click Me</button>
    )
  }
    


ReactDOM.render(
  <ButtonCounter />,
  document.getElementById('container')
);

Điều này kết xuất nút của chúng tôi với DOM. Trước khi định nghĩa useEffect, chúng ta có thể đặt trạng thái ban đầu bằng cách định nghĩa useState Hook.

const [count, setCount] = useState(0);

Bằng cách sử dụng cú pháp này, React đặt biến đầu tiên về trạng thái ban đầu. Trong trường hợp này, biến "count" được đặt bởi đối số được truyền vào useState. React đã đặt trạng thái đếm ban đầu của chúng ta thành 0. Biến thứ hai sẽ được sử dụng như một hàm để cập nhật số lượng.

Bây giờ chúng tôi đã đặt trạng thái đếm ban đầu thành 0, chúng tôi có thể sử dụng hàm setCount để cập nhật trạng thái.

const ButtonCounter = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked the button {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

Bằng cách sử dụng setCount làm hàm gọi lại cho thuộc tính onClick của chúng tôi, chúng tôi có thể cập nhật DOM mỗi khi nhấp vào nút.

Điều này có nghĩa là hàm setCount của chúng tôi như được xác định khi thiết lập trạng thái ban đầu của chúng tôi với useState đang hoạt động! Bây giờ chúng ta đã thấy cú pháp cho useState Hook, hãy xem useEffect.

Cú pháp useEffect

Như đã nêu trước đó, useEffect xác định việc sử dụng các tác dụng phụ. Các thay đổi đối với các thành phần thông qua tìm nạp dữ liệu và các thay đổi DOM thủ công tạo thành các tác dụng phụ. UseEffect Hook được gọi mỗi khi thành phần hiển thị.

Nó hoạt động tương tự như componentDidMount và componentDidUpdate trong các thành phần lớp React. Tiếp theo với ví dụ về bộ đếm của chúng tôi, chúng tôi sẽ có useEffect cập nhật DOM của mình bằng cách hiển thị tên trong phần tử

của chúng tôi.

const [count, setCount] = useState(0);
  const [name, setName] = useState(" ");

  useEffect(() => {
    setName(name + "Ryan")
  })
  return (
    <div>
      <p>Hello {name}! You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
      </div>
  )
}

Điều này được cố ý mã hóa không chính xác. Những gì được đẩy đến DOM chứng tỏ useEffect được gọi với mỗi lần hiển thị của thành phần.

Điều này xảy ra vì theo mặc định, useEffect Hook hoạt động giống như sự kết hợp của componentDidMount và componentWillUpdate.

Để tùy chỉnh Hook của chúng ta chỉ hiển thị khi thành phần gắn kết, chúng ta có thể gửi đối số thứ hai để useEffect. Bằng cách chuyển useEffect một mảng trống ([]) làm đối số thứ hai, React biết chỉ gọi useEffect khi thành phần gắn kết.

useEffect(() => {
    setName(name + "Ryan")
  }, [])

Bây giờ, chúng ta sẽ thấy chuỗi “Ryan” chỉ được hiển thị khi thành phần chức năng của chúng ta gắn kết.

Tuyệt quá! Làm quen với việc sử dụng Hooks sẽ mất một thời gian. Với ý nghĩ đó, tài liệu React chính thức có hướng dẫn cập nhật về cách sử dụng Hooks. Đọc nó ở đây.

Kết luận

Trong phần giới thiệu về React useEffect Hook này, chúng ta đã tìm hiểu Hook là gì và cách sử dụng chúng. Chúng tôi cũng đề cập đến cú pháp cho useState và useEffect Hooks với một ví dụ cơ bản cho mỗi cái.

Những công dụng tiềm năng cho Hooks vượt xa những gì được đề cập trong lớp sơn lót này. Sau khi đọc phần này và dành thời gian viết mã của riêng bạn, hãy phân nhánh các tài nguyên được liên kết để hiểu sâu hơn về React Hooks. Mặc dù các thành phần lớp sẽ không đi đâu cả, nhưng Hook là tương lai của React, vì vậy hãy luôn thông báo và cập nhật chúng!