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)
})
没有依赖。这个在每次渲染后都会被调用。
其他回答
窗口。即使用户按下返回按钮导航到页面，Onpageshow也能工作，这与传递一个空数组作为use-effect钩子的第二个参数不同，后者在通过返回按钮返回页面时不会触发(因此不是在每一种形式的初始页面加载上)。
useEffect(() => {
window.onpageshow = async function() {
setSomeState(false)
let results = await AsyncFunction()
console.log(results, 'Fires on on first load,
refresh, or coming to the page via the back button')
};
};
以下是我对亚辛回答的看法。
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])
);
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');
})
or
useOnceCall(()=>{
console.log('Fetched Data');
}, isFetched);
我喜欢定义一个mount函数，它以useMount的方式欺骗EsLint，我发现它更不言自明。
const mount = () => {
console.log('mounted')
// ...
const unmount = () => {
console.log('unmounted')
// ...
}
return unmount
}
useEffect(mount, [])
这并没有完全回答你的问题，但可能会产生只运行一次函数的预期效果，并且是在第一次呈现之后。非常类似于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
