作者：liuliyu2000_867 | 来源：互联网 | 2022-11-30 18:12
该useEffect阵营钩将运行在功能上传递的每一个变化.这可以进行优化,只有在所需的属性发生变化时才能调用它.
如果我想调用初始化函数componentDidMount而不是在更改时再调用它会怎么样？假设我想加载一个实体,但加载函数不需要组件中的任何数据.我们怎么能用useEffect钩子做这个？
class MyComponent extends React.PureComponent {
componentDidMount() {
loadDataOnlyOnce();
}
render() { ... }
}
使用钩子,这可能是这样的:
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce(); // this will fire on every change :(
}, [...???]);
return (...);
}
Tholle..
255
如果你只想useEffect在初始渲染之后运行给定的函数,你可以给它一个空数组作为第二个参数.
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce();
}, []);
return {/* ... */}
;
}
Edan Chetrit..
52
TL; DR
useEffect(yourCallback, []) -仅在第一次渲染后才触发回调。
详细说明
useEffect默认情况下，在每次渲染组件后运行（因此会产生效果）。
当放置useEffect到组件中时，您告诉React您想运行回调作为效果。React将在渲染后和执行DOM更新后运行效果。
如果仅传递回调，则该回调将在每次渲染后运行。
如果传递第二个参数（数组），React将在第一个渲染之后以及每次更改数组中的一个元素时运行回调。例如，在放置时useEffect(() => console.log('hello'), [someVar, someOtherVar])-回调将在第一个渲染之后someVar以及someOtherVar更改或的任何渲染之后运行。
通过向第二个参数传递一个空数组，React将在每次渲染该数组之后进行比较，并且不会看到任何更改，因此仅在第一个渲染之后才调用回调。
1> Tholle..：
如果你只想useEffect在初始渲染之后运行给定的函数,你可以给它一个空数组作为第二个参数.
function MyComponent() {
useEffect(() => {
loadDataOnlyOnce();
}, []);
return {/* ... */}
;
}
或者,如果有用于获取数据的参数(例如用户ID),则可以在该数组中传递用户ID,如果更改,则组件将重新获取数据.许多用例都是这样的.
是的...有关跳过的更多信息，请参见此处：https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
2> Edan Chetrit..：
TL; DR
useEffect(yourCallback, []) -仅在第一次渲染后才触发回调。
详细说明
useEffect默认情况下，在每次渲染组件后运行（因此会产生效果）。
当放置useEffect到组件中时，您告诉React您想运行回调作为效果。React将在渲染后和执行DOM更新后运行效果。
如果仅传递回调，则该回调将在每次渲染后运行。
如果传递第二个参数（数组），React将在第一个渲染之后以及每次更改数组中的一个元素时运行回调。例如，在放置时useEffect(() => console.log('hello'), [someVar, someOtherVar])-回调将在第一个渲染之后someVar以及someOtherVar更改或的任何渲染之后运行。
通过向第二个参数传递一个空数组，React将在每次渲染该数组之后进行比较，并且不会看到任何更改，因此仅在第一个渲染之后才调用回调。
3> Ben Carp..：
useMountEffect挂钩
在组件挂载后仅运行一次功能是一种常见的模式，它证明了自己的钩子隐藏了实现细节。
const useMountEffect = (fun) => useEffect(fun, [])
在任何功能组件中使用它。
function MyComponent() {
useMountEffect(function) // function will run only once after it has mounted.
return ...
;
}
关于useMountEffect挂钩
当useEffect与第二个数组参数一起使用时，React将在挂载（初始渲染）后和数组中的值更改后运行回调。由于我们传递了一个空数组，因此它将仅在安装后运行。
我非常喜欢您的回答，因为ESLint规则“ react-hooks / exhaustive-deps”将始终在空的依赖项列表上失败。例如，著名的create-react-app模板将执行该规则。
4> Yangshun Tay..：
传递一个空数组作为第二个参数useEffect.这有效地告诉React,引用文档:
这告诉React你的效果不依赖于来自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
{user ? user.name.first : 'Loading...'}
;
}
ReactDOM.render(, document.getElementById('app'));
京公网安备 11010802041100号