我试图深入了解useEffect钩子。
我想知道何时使用哪种方法以及为什么？
1.useEffect with no second paraments
useEffect(()=>{})
2.useEffect with second paraments as []
useEffect(()=>{},[])
3.useEffect with some arguments passed in the second parameter
useEffect(()=>{},[arg])
深入react useEffect / useEffect 的使用？
IT技术
javascript
reactjs
react-redux
react-hooks
2021-02-08 06:34:25
2个回答
useEffect(callback);
// Example
useEffect(() => {
console.log("executed after render phase");
return () => {
console.log("cleanup function after render");
};
});
- 在每个组件渲染上运行。
- 通常用于调试，类似于每次渲染时函数体的执行：
const Component = () => {
callback()
return <></>;
};
注意：在执行时间方面仍然存在差异（请参阅下一个注释）。检查此沙箱日志。
- 该清理功能以后每次运行呈现。
useEffect(callback,[]);
// Example
useEffect(() => {
const fetchUsers = async () => {
const users = await fetch();
setUsers(users);
};
fetchUsers();
console.log("called on component's mount");
return () => {
console.log("called on component's unmount");
};
}, []);
- 通常用于通过数据获取等初始化组件状态。
- 在组件安装上运行一次。
- 该清理功能将在组件的运行卸载。
陷阱：
- 在渲染阶段之后执行的回调。
请记住，首先进行渲染，然后进行安装。
- 由于关闭而导致数据过时
粗略地说，大多数错误
useEffect是不知道闭包是如何工作的，也不注意linting 警告。
确保数组包含组件作用域中 随时间变化并由效果使用的所有值。否则，您的代码将引用之前渲染中的陈旧值-请在 React 文档中注意。
useEffect(callback,[arg]);
// Example
useEffect(() => {
console.log({ users });
return () => {
console.log("user value is changing");
};
}, [users]);
- 在
arg值更改时运行。 - 通常用于在props/状态更改时运行事件。
- 可以提供多个依赖项：
[arg1,arg2,arg3...] - 清除功能在
arg值更改时运行。
陷阱：
- “On Change”是指与 的先前值进行浅比较
arg。
即比较
arg来自前一个渲染和当前渲染的值，prevArg === arg ? doNothing() : callback()。
因为在 Javascript 中
{} === {} || [] === []是一个虚假的语句，如果arg（users在我们的例子中）是一个对象，回调将在每次渲染时运行。也可以在 mount 上运行，因为第一次比较总是假的
其他注意事项
useEffect浏览器重新绘制后触发的回调。useEffect以声明顺序执行的回调（与所有钩子一样），请查看示例。- 每个人都
useEffect应该有一个单一的责任。 - 如果您使用来自 的值
useRef，则在清理函数中，事先将该值复制到回调的作用域。
const timeoutIdRef = useRef();
useEffect(() => {
const timeoutId = timeoutIdRef.current;
return () => {
/*
Using timeoutIdRef.current directly here is not safe
since you can't guarantee the ref to exists in this point
(especially when the component unmounts)
*/
// Should get a lint warning here
clearTimeout(timeoutIdRef.current); // BAD
// Closure on timeoutId value
clearTimeout(timeoutId); // GOOD
};
}, [arg]);
- 当 ref 指向 DOM 元素时，使用
ref.currentasuseEffect的依赖项是否安全？ - 有时您需要运行
useEffectONCE，在装载或首次渲染时，这些是常见的模式。
const isMounted = useRef(false);
useEffect(() => {
if (isMounted.current) {
// first mount
} else {
isMounted.current = true;
}
}, [arg]);
继续阅读：
- 我的附加回答解释了回调
return语句useEffect useEffect丹·阿布拉莫夫的完整指南useEffect应用程序接口- 使用效果钩子- React docs
如果您熟悉 React 类的生命周期方法，您可以将 useEffect Hook 视为 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。
1.useEffect 没有第二个参数：当我们希望在组件刚安装时或已更新时发生某些事情时使用。从概念上讲，我们希望它在每次渲染后发生。
2.useEffect 第二个参数为 [] ：当我们希望组件挂载时发生一些事情时使用，如果只在挂载时执行一次。它更接近熟悉的 componentDidMount 和 componentWillUnmount。
3.useEffect 在第二个参数中传递一些参数：当我们希望在 pramter 传递时发生某些事情时使用它，例如。args 在您的情况下发生了变化。
欲了解更多信息。在这里查看：https : //reactjs.org/docs/hooks-effect.html