仅运行一次 useEffect

React 带有一个内置的钩子，名为 useEffect。钩子用于函数组件。Class 组件与 useEffect 的比较是方法 componentDidMount、componentDidUpdate 和 componentWillUnmount。

useEffect 将在组件渲染时运行，这可能比您想象的要多。感觉过去几周里我已经遇到过十几次这种情况了，所以值得写一篇简短的博文。

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Run! Like go get some data from an API.
  });

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

在一个完全隔离的示例中，useEffect 很可能只运行一次。但在一个更复杂的应用程序中，随着 props 的传递等，这肯定不能保证。问题在于，如果您要执行诸如从 API 获取数据之类的操作，您可能会最终进行两次获取，这既没有效率也不必要。

诀窍是 useEffect 接受第二个参数。

第二个参数是一个变量数组，组件将检查该数组以确保在重新渲染之前发生更改。您可以将您想要在此处检查的任何 props 和 state 部分放在这里。

或者，什么也不放

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    // Run! Like go get some data from an API.
  }, []);

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

这将确保 useEffect 只运行一次。

来自文档的说明

如果您使用此优化，请确保该数组包含来自组件范围（例如 props 和 state）的所有随着时间推移而发生变化且被效果使用的值。否则，您的代码将引用来自先前渲染的过时值。