如何仅使用一次React useEffect调用加载函数

该useEffect阵营钩将运行在功能上传递的每一个变化。可以对其进行优化，使其仅在所需属性更改时才调用。

如果我想从中调用初始化函数componentDidMount而不在更改时再次调用该怎么办？假设我要加载一个实体，但是加载功能不需要组件中的任何数据。我们如何使用useEffect钩子做到这一点？

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

使用钩子可能看起来像这样：

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

如果只想useEffect在初始渲染后运行给定的函数，则可以给它一个空数组作为第二个参数。

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

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

TL; DR

useEffect(yourCallback, []) -仅在第一次渲染后才触发回调。

详细说明

useEffect默认情况下，在每次渲染组件后运行（因此会产生效果）。

当放置useEffect到组件中时，您告诉React您想运行回调作为效果。React将在渲染后和执行DOM更新后运行效果。

如果仅传递回调，则该回调将在每次渲染后运行。

如果传递第二个参数（数组），React将在第一个渲染之后以及每次更改数组中的一个元素时运行回调。例如，在放置时useEffect(() => console.log('hello'), [someVar, someOtherVar])-回调将在第一个渲染之后someVar以及someOtherVar更改或的任何渲染之后运行。

通过向第二个参数传递一个空数组，React将在每次渲染该数组之后进行比较，并且不会看到任何更改，因此仅在第一个渲染之后才调用回调。

useMountEffect挂钩

在组件挂载后仅运行一次功能是一种常见的模式，它证明了自己的钩子隐藏了实现细节。

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

在任何功能组件中使用它。

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

关于useMountEffect挂钩

当useEffect与第二个数组参数一起使用时，React将在挂载（初始渲染）之后和数组中的值更改后运行回调。由于我们传递了一个空数组，因此它将仅在安装后运行。

将空数组作为第二个参数传递给useEffect。引用docs可以有效地告诉React ：

这告诉React，您的效果不依赖于props或state的任何值，因此它不需要重新运行。

这是一个片段，您可以运行以显示它的工作原理：

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>

我喜欢定义一个mount函数，它以相同的方式欺骗​​EsLint useMount，我发现它更加不言自明。

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

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

诀窍是useEffect需要第二个参数。

第二个参数是一组变量，组件将在重新渲染之前检查这些变量以确保其已更改。您可以在此处放置要检查的道具和状态的任何内容。

或者，什么也不放：

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>
  );
}

这样可以确保useEffect仅运行一次。

从文档中注意：

如果使用此优化，请确保数组包含组件作用域中所有随时间变化且被效果使用的值（例如props和state）。否则，您的代码将引用先前渲染中的陈旧值。