Cách gọi chức năng tải với React useEffect chỉ một lần

Các useEffect Phản ứng móc sẽ chạy thông qua chức năng thay đổi mỗi ngày. Điều này có thể được tối ưu hóa để cho phép nó chỉ gọi khi các thuộc tính mong muốn thay đổi.

Điều gì xảy ra nếu tôi muốn gọi một hàm khởi tạo từ componentDidMountvà không gọi lại nó khi thay đổi? Giả sử tôi muốn tải một thực thể, nhưng chức năng tải không cần bất kỳ dữ liệu nào từ thành phần. Làm thế nào chúng ta có thể làm điều này bằng cách sử dụng useEffectmóc?

class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}

Với móc này có thể trông như thế này:

function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // this will fire on every change :(
    }, [...???]);
    return (...);
}

Nếu bạn chỉ muốn chạy hàm được cung cấp useEffectsau kết xuất ban đầu, bạn có thể cung cấp cho nó một mảng trống làm đối số thứ hai.

function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

  return <div> {/* ... */} </div>;
}

TL; DR

useEffect(yourCallback, []) - sẽ kích hoạt cuộc gọi lại chỉ sau lần kết xuất đầu tiên.

Giải thích chi tiết

useEffectchạy theo mặc định sau mỗi lần kết xuất thành phần (do đó gây ra hiệu ứng).

Khi đặt useEffectvào thành phần của bạn, bạn nói với React rằng bạn muốn chạy gọi lại như một hiệu ứng. React sẽ chạy hiệu ứng sau khi kết xuất và sau khi thực hiện các cập nhật DOM.

Nếu bạn chỉ chuyển một cuộc gọi lại - cuộc gọi lại sẽ chạy sau mỗi lần kết xuất.

Nếu truyền đối số thứ hai (mảng), React sẽ chạy lại cuộc gọi sau lần kết xuất đầu tiên và mỗi khi một trong các phần tử trong mảng bị thay đổi. ví dụ như khi đặt useEffect(() => console.log('hello'), [someVar, someOtherVar])- gọi lại sẽ chạy sau khi người đầu tiên đưa ra và sau khi bất kỳ và việc này là một trong someVarhoặc someOtherVarđược thay đổi.

Bằng cách chuyển đối số thứ hai một mảng trống, React sẽ so sánh sau mỗi kết xuất mảng và sẽ thấy không có gì thay đổi, do đó chỉ gọi lại cuộc gọi sau lần kết xuất đầu tiên.

hookMountEffect

Chạy một chức năng chỉ một lần sau khi gắn kết thành phần là một mô hình phổ biến đến mức nó biện minh cho một cái móc của chính nó che giấu các chi tiết thực hiện.

const useMountEffect = (fun) => useEffect(fun, [])

Sử dụng nó trong bất kỳ thành phần chức năng.

function MyComponent() {
    useMountEffect(function) // function will run only once after it has mounted. 
    return <div>...</div>;
}

Giới thiệu về hook useMountEffect

Khi sử dụng useEffectvới đối số mảng thứ hai, React sẽ chạy gọi lại sau khi gắn (kết xuất ban đầu) và sau khi các giá trị trong mảng đã thay đổi. Vì chúng ta vượt qua một mảng trống, nó sẽ chỉ chạy sau khi gắn.

Truyền một mảng trống làm đối số thứ hai useEffect. Điều này thực sự nói với React, trích dẫn các tài liệu :

Điều này cho React biết rằng hiệu ứng của bạn không phụ thuộc vào bất kỳ giá trị nào từ đạo cụ hoặc trạng thái, do đó, nó không bao giờ cần phải chạy lại.

Đây là một đoạn mà bạn có thể chạy để cho thấy rằng nó hoạt động:

function App() {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch('https://randomuser.me/api/')
      .then(results => results.json())
      .then(data => {
        setUser(data.results[0]);
      });
  }, []); // Pass empty array to only run once on mount.
  
  return <div>
    {user ? user.name.first : 'Loading...'}
  </div>;
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>

<div id="app"></div>

Tôi muốn xác định một mountchức năng, nó đánh lừa EsLint theo cách tương tự useMountvà tôi thấy nó tự giải thích nhiều hơn.

const mount = () => {
  console.log('mounted')
  // ...

  const unmount = () => {
    console.log('unmounted')
    // ...
  }
  return unmount
}
useEffect(mount, [])

Thủ thuật là useEffect lấy tham số thứ hai.

Tham số thứ hai là một mảng các biến mà thành phần sẽ kiểm tra để đảm bảo nó thay đổi trước khi kết xuất lại. Bạn có thể đặt bất kỳ bit nào của đạo cụ và trạng thái bạn muốn vào đây để kiểm tra.

Hoặc, không đặt gì:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {

    // Run! Like go get some data from an API.

  }, []); //Empty array as second argument

  return (
    <div>
      {/* Do something with data. */}
    </div>
  );
}

Điều đó sẽ đảm bảo useEffect chỉ chạy một lần.

Lưu ý từ các tài liệu:

Nếu bạn sử dụng tối ưu hóa này, hãy đảm bảo mảng bao gồm tất cả các giá trị từ phạm vi thành phần (chẳng hạn như đạo cụ và trạng thái) thay đổi theo thời gian và được sử dụng bởi hiệu ứng. Nếu không, mã của bạn sẽ tham chiếu các giá trị cũ từ các kết xuất trước đó.