React: Giới thiệu nhanh về cách sử dụng

Một hiệu ứng / một tác dụng phụ là gì?

Các thuật ngữ hiệu ứng phụ và hiệu ứng được sử dụng thay thế cho nhau và có nghĩa giống nhau trong React: chúng đề cập đến các hoạt động không ảnh hưởng đến giao diện người dùng hoặc giá trị đầu ra. Nếu hoạt động bạn đang thực hiện đang quản lý bất kỳ thay đổi trạng thái khác hơn là giá trị trả về cuối cùng, sau đó nó là một tác dụng phụ!

Chức năng của một thành phần React là xử lý kết xuất và thao tác trên giao diện người dùng. Bởi vì các hiệu ứng phụ không ảnh hưởng đến giai đoạn kết xuất, chúng không nằm trong phần chính của một thành phần.

Là useEffectgì?

useEffect là một React Hook cho phép bạn chạy các hiệu ứng phụ độc lập với việc kết xuất.

Nếu bạn có các phần mã của mình không liên quan trực tiếp đến giao diện người dùng hoặc các tác vụ không đồng bộ và thực thi bên ngoài luồng điều khiển thông thường, bạn nên đặt chúng bên trong useEffecthook. Điều này cho phép chúng hoạt động bên ngoài chu kỳ kết xuất và hoạt động ở hậu trường mà không can thiệp vào giao diện người dùng.

useEffect chấp nhận hai đối số:

• một lệnh gọi lại (bắt buộc) - hiệu ứng - sẽ được thực hiện sau khi đánh giá thành phần nếu các phần phụ thuộc được chỉ định thay đổi;
• các phụ thuộc (tùy chọn) đang được kiểm tra bởi chức năng đó.

Ví dụ về các phép tính không phụ thuộc vào kết xuất và nên nằm trong useEffecthook:

• sử dụng bộ đếm thời gian;
• yêu cầu mạng (như fetch);
• đọc từ bộ nhớ cục bộ;
• đăng ký và hủy đăng ký người nghe sự kiện;
• cập nhật DOM theo cách thủ công.

• import { useEffect } from 'react'
• Logic hiệu ứng phụ đi vào bên trong hàm gọi lại.
• Kiểm soát sự phụ thuộc khi bạn muốn tác dụng phụ chạy. Chúng được chuyển vào dưới dạng một mảng.

useEffect(() => { logic }, [dependencies]);

Hãy xem cách useEffecthoạt động. Trong ví dụ này, chúng tôi đang lấy thông tin người dùng từ cơ sở dữ liệu sau khi loggedIntrạng thái cập nhật lên truevà sau đó chúng tôi in thông tin đó lên trang:

import { useState, useEffect } from 'react';
function App() {
  const [loggedIn, setLoggedIn] = useState(false);
  const [userName, setUserName] = useState("");
  useEffect( () => {
    if (loggedIn === true) {
      // [ retrieving user info from an imaginary database ]
      // [ we set the returned user info in state ]
      setUserName("Lisa Simpson");
    } else {
      setUserName("");
    }
  }, [loggedIn]);
  return (
    <div>
      <h1>Hello</h1>
      <button onClick={ () => setLoggedIn(!loggedIn) } >Log in / out</button>
      {
        loggedIn === true
          ? <p>Hello, {userName}</p>
          : <p>Please log in</p>
      }
    </div>
  )
};
export default App;

• Chúng tôi có một ifcâu lệnh kiểm tra cơ sở dữ liệu tưởng tượng để xem liệu người dùng có loggedIn. Nếu có, chúng tôi cập nhật trạng thái của userName. (Đổi lại, chúng tôi có logic để hiển thị tên của họ trên màn hình nếu loggedIn === true.)
• Khi nhấp vào nút (quay lại), loggedIntrạng thái được cập nhật bằng cách sử dụng setLoggedInchức năng.
• useEffectchạy mỗi khi loggedIntrạng thái thay đổi, bởi vì chúng tôi đã vượt qua loggedInnhư một phụ thuộc.
• useEffectkhông không chạy khi setUserNamechức năng chạy, bởi vì chúng tôi đã không đặt nó trong mảng phụ thuộc.

Sự phụ thuộc là cách chúng tôi kiểm soát khi useEffectchạy.

• Nếu bạn muốn useEffectchạy trên mọi kết xuất, hãy bỏ qua các phần phụ thuộc.
• Nếu bạn muốn nó chỉ chạy một lần sau khi kết xuất ban đầu, hãy cung cấp một mảng trống.
• Nếu bạn muốn nó chạy sau khi một giá trị cụ thể thay đổi, hãy chuyển nó làm phần phụ thuộc.

• Nếu bạn đang sử dụng propshoặc statecác giá trị, bạn phải khai báo những giá trị này dưới dạng phụ thuộc; khi các giá trị này thay đổi, useEffectsẽ chạy. (Trong ví dụ trên, bạn có thể bỏ qua setUserNamehàm khỏi các phần phụ thuộc vì nó không phải là một giá trị trạng thái - đó là một hàm cập nhật giá trị trạng thái, vì vậy nó sẽ không bao giờ không đồng bộ với trạng thái.)

• chức năng cập nhật trạng thái;
• các hàm hoặc hàm API tích hợp sẵn;
• các biến hoặc hàm được xác định bên ngoài một hàm thành phần (như hàm trợ giúp nằm trong một tệp riêng biệt).

Một số tác dụng phụ - như bộ hẹn giờ hoặc đăng ký (kết nối với nguồn dữ liệu liên tục) - yêu cầu xóa sạch, vì chúng tôi không muốn chúng trôi nổi sau khi thành phần bị xóa khỏi DOM.

Để dọn dẹp, chúng ta chỉ cần trả về một hàm bên trong useEffectvà nó sẽ dọn dẹp; các chức năng này được gọi một cách thích hợp cleanup functions. Các chức năng dọn dẹp này chạy sau lần hiển thị tiếp theo, nhưng trước lần hiển thị tiếp theo useEffect.