如何优化 useEffect Hook 以仅在初始渲染时触发函数？

优化的 useEffect Hook：仅调用一次初始化函数

React 的 useEffect hook 允许运行自定义函数以响应组件的 props 或 state 的变化。但是，在某些情况下，需要仅在初始渲染时调用函数，以模拟旧版 componentDidMount 生命周期方法的行为。

考虑以下基于类的组件：

<code class="javascript">class MyComponent extends React.PureComponent {
    componentDidMount() {
        loadDataOnlyOnce();
    }
    render() { ... }
}</code>

在使用钩子的基于函数的组件中，这可以翻译如下：

<code class="javascript">function MyComponent() {
    useEffect(() => {
        loadDataOnlyOnce(); // This will fire on every change
    }, [...???]);
    return (...);
}</code>

为了确保函数只被调用一次，应该提供一个空数组作为 useEffect 的第二个参数：

<code class="javascript">function MyComponent() {
  useEffect(() => {
    loadDataOnlyOnce();
  }, []);

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

通过提供空数组，useEffect 将仅在初始渲染阶段后触发，从而允许高效初始化组件，而无需不必要的重新渲染。

以上是如何优化 useEffect Hook 以仅在初始渲染时触发函数？的详细内容。更多信息请关注PHP中文网其他相关文章！