useEffect React钩子将在每次更改时运行传入函数。可以对其进行优化，使其仅在所需属性更改时调用。
如果我想从componentDidMount调用初始化函数，而不是在更改时再次调用它，该怎么办?假设我想加载一个实体，但加载函数不需要来自组件的任何数据。我们如何使用useEffect钩子来实现这个?
class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}
如果使用钩子，可能是这样的:
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}
当前回答
将依赖项数组保留为空。希望这能帮助你更好地理解。
useEffect(() => {
doSomething()
}, [])
空依赖数组只在挂载时运行一次
useEffect(() => {
doSomething(value)
}, [value])
将值作为依赖项传递。如果依赖关系自上次以来发生了变化，该效果将再次运行。
useEffect(() => {
doSomething(value)
})
没有依赖。这个在每次渲染后都会被调用。
其他回答
如果您只想在初始呈现后运行给useEffect的函数，可以给它一个空数组作为第二个参数。
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce();
}, []);
return <div> {/* ... */} </div>;
}
将一个空数组作为第二个参数传递给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>
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将在挂载(初始渲染)和数组中的值发生变化后运行回调。因为我们传递了一个空数组，所以它只会在挂载之后运行。
我在使用React 18时遇到了这个问题。我是这样处理的:
import { useEffect, useRef } from "react";
export default function Component() {
const isRunned = useRef(false);
useEffect(() => {
if(isRunned.current) return;
isRunned.current = true;
/* CODE THAT SHOULD RUN ONCE */
}, []);
return <div> content </div>;
}
看看这里他们是如何解释为什么useEffect被多次调用的。
如果你只是在渲染后调用useeffect中的函数，你添加一个空数组作为useeffect的第二个参数
useEffect=(()=>{
functionName(firstName,lastName);
},[firstName,lastName])
