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

Question

useEffect React钩子将在每次更改时运行传入函数。可以对此进行优化，使其仅在所需的属性更改时才调用。

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

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

有了钩子，这可能是这样的：

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

Answer 1

DR

useEffect(yourCallback，[])-仅在第一次呈现后触发回调。

详细说明

useEffect默认情况下在组件的每次呈现之后运行（从而产生效果）。

在组件中放置useEffect时，您告诉React，希望将回调作为效果运行。React将在呈现和执行DOM更新之后运行效果。

如果您只传递一个回调-回调将在每次呈现后运行。

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

通过向第二个参数传递一个空数组，React将在每次呈现数组之后进行比较，并且将看到没有任何更改，因此只在第一次呈现之后调用回调。

Answer 2

null

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

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