该useEffect阵营钩将运行在功能上传递的每一个变化。这可以优化为仅当所需的属性发生变化时才调用。
如果我想调用初始化函数componentDidMount而不是在更改时再次调用它怎么办？假设我想加载一个实体，但加载函数不需要来自组件的任何数据。我们如何使用useEffect钩子来做到这一点？
class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}
使用钩子，这可能如下所示：
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}
如果您只想useEffect在初始渲染后运行给定的函数，您可以给它一个空数组作为第二个参数。
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce();
}, []);
return <div> {/* ... */} </div>;
}
TL; 博士
useEffect(yourCallback, []) - 只有在第一次渲染后才会触发回调。
详细说明
useEffect默认情况下在每次渲染组件后运行（从而产生效果）。
当放置useEffect在你的组件中时，你告诉 React 你想要运行回调作为效果。React 将在渲染和执行 DOM 更新后运行效果。
如果您只传递一个回调 - 回调将在每次渲染后运行。
如果传递第二个参数（数组），React 将在第一次渲染之后运行回调，并且每次更改数组中的一个元素。例如，在放置时useEffect(() => console.log('hello'), [someVar, someOtherVar])- 回调将在第一次渲染之后运行，并且在任何渲染之后运行someVar或someOtherVar更改。
通过向第二个参数传递一个空数组，React 将在每次渲染数组后进行比较，并且不会看到任何更改，因此仅在第一次渲染后调用回调。
在组件挂载后只运行一次函数是一种常见的模式，它证明了自己隐藏实现细节的钩子是合理的。
const useMountEffect = (fun) => useEffect(fun, [])
在任何功能组件中使用它。
function MyComponent() {
useMountEffect(function) // function will run only once after it has mounted.
return <div>...</div>;
}
关于 useMountEffect 钩子
当useEffect与第二个数组参数一起使用时，React 将在挂载（初始渲染）后和数组中的值更改后运行回调。由于我们传递了一个空数组，它只会在挂载后运行。
将一个空数组作为第二个参数传递给useEffect. 这有效地告诉 React，引用文档：
这告诉 React 你的 effect 不依赖于来自 props 或 state 的任何值，所以它永远不需要重新运行。
这是一个片段，您可以运行它以表明它有效：
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>function useOnceCall(cb, condition = true) {
const isCalledRef = React.useRef(false);
React.useEffect(() => {
if (condition && !isCalledRef.current) {
isCalledRef.current = true;
cb();
}
}, [cb, condition]);
}
并使用它。
useOnceCall(() => {
console.log('called');
})
或者
useOnceCall(()=>{
console.log('Fetched Data');
}, isFetched);