如何使用 React use 调用加载函数Effect 一次

javascript reactjs react-hooks use-effect

2022-08-29 23:16:44

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

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

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

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

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

答案 1

如果只想运行初始呈现后给定的函数，则可以为其提供一个空数组作为第二个参数。useEffect

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

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

答案 2

TL;DR

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

详细说明

useEffect默认情况下，在每次渲染组件后运行（从而导致效果）。

当你放在你的组件中时，你告诉 React 你想把回调作为一种效果来运行。React 将在渲染和执行 DOM 更新后运行该效果。useEffect

如果只传递一个回调 - 回调将在每次渲染后运行。

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

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