useEffect React钩子将在每次更改时运行传入函数。可以对其进行优化，使其仅在所需属性更改时调用。
如果我想从componentDidMount调用初始化函数，而不是在更改时再次调用它，该怎么办?假设我想加载一个实体，但加载函数不需要来自组件的任何数据。我们如何使用useEffect钩子来实现这个?
class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}
如果使用钩子，可能是这样的:
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}
当前回答
我发现使用lodash中的once函数可以简洁而优雅地解决这个问题。
import { once } from "lodash";
import { useEffect, useRef } from "react";
export const useEffectOnce = (cb: () => void) => {
const callBackOnce = useRef(once(cb)).current;
useEffect(() => callBackOnce(), [callBackOnce]);
};
其他回答
博士TL;
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将在挂载(初始渲染)和数组中的值发生变化后运行回调。因为我们传递了一个空数组，所以它只会在挂载之后运行。
以下是我对亚辛回答的看法。
import {useEffect, useRef} from 'react';
const useOnceEffect = (effect: () => void) => {
const initialRef = useRef(true);
useEffect(() => {
if (!initialRef.current) {
return;
}
initialRef.current = false;
effect();
}, [effect]);
};
export default useOnceEffect;
用法:
useOnceEffect(
useCallback(() => {
nonHookFunc(deps1, deps2);
}, [deps1, deps2])
);
将一个空数组作为第二个参数传递给useEffect。这有效地告诉React，引用文档:
这告诉React，你的效果不依赖于道具或状态的任何值，所以它永远不需要重新运行。
这是一个片段，你可以运行，以显示它的工作:
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>
这并没有完全回答你的问题，但可能会产生只运行一次函数的预期效果，并且是在第一次呈现之后。非常类似于componentDidMount函数。使用useState而不是useEffect来避免依赖lint错误。您只需将一个自动执行的匿名函数作为第一个参数传递给useState。说句题外话，我不确定为什么React不简单地提供一个钩子来做这件事。
import React, { useState } from "react"
const Component = () => {
useState((() => {
console.log('componentDidMountHook...')
}))
return (
<div className='component'>Component</div>
)
}
export default Component
