You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
答:会出现 warning,useEffect 应该返回一个清理函数或者什么都不返回。 Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.
functionTimer(){const[count,setCount]=React.useState(0);useEffect(()=>{constintervalId=setInterval(()=>{setCount(count+1);},1000);return()=>clearInterval(intervalId);},[]);return(<div>The count is: {count}</div>);}
functionTimer(){const[count,setCount]=React.useState(0);useEffect(()=>{constintervalId=setInterval(()=>{setCount(count+1);},1000);return()=>clearInterval(intervalId);},[count]);return(<div>The count is: {count}</div>);}
functionTimer(){const[count,setCount]=React.useState(0);constcountRef=React.useRef(0);useEffect(()=>{constintervalId=setInterval(()=>{countRef.current=countRef.current+1;setCount(countRef.current);},1000);return()=>clearInterval(intervalId);},[]);return(<div>The count is: {count}</div>);}
functionTimer(){const[count,setCount]=React.useState(0);useEffect(()=>{constintervalId=setInterval(()=>{setCount(count=>count+1);},1000);return()=>clearInterval(intervalId);},[]);return(<div>The count is: {count}</div>);}
问题四
我想使用类似于 component 组件中的 this 该怎么办,用它跟踪变量的变化,但是不触发 re-render.
本文从实际示例出发,分析 hooks 在使用时容易遇到的陷阱,以及提出如何避免掉进 hooks 陷阱的方法。
问题一
下方的代码存在什么问题?
答:会出现 warning,useEffect 应该返回一个清理函数或者什么都不返回。 Warning: useEffect function must return a cleanup function or nothing. Promises and useEffect(async () => ...) are not supported, but you can call an async function inside an effect.
正确写法:
问题二
下方强制更新组件的代码能 work 吗?
答:不能 work,在函数式组件中,如果 setState 没有修改对应 state 的值(浅比较相等),那么不会触发 re-render,这点和 class 组件不同,class 组件只要 setState 就会触发 re-render,因为它每次会合并 state 中所有属性,生成一个新的 state。
正确写法:
问题三
下方代码存在什么问题?
答:这是一个最常见的说明 useEffect 陷阱的例子了。在上方的代码运行后,count 首先为 0,一秒后更新为 1,之后就不变化了。这是由闭包导致的,useEffect 中的 count 值始终为 0,setInterval 每次执行都将其更新为 1。
方案1:依赖数组中每个依赖的外部变量都添加进去(性能不佳)
方案2:使用 useRef 生成一个可变对象,记住我们的变量(个人最推荐,适用于所有需要依赖外部变量的情况)
方案3:如果是依赖外部变量做 setState,可以用 [functional-updates](https://reactjs.org/docs/hooks-reference.html#functional-updates) 然后把依赖的变量去除(很适合这个例子,但是适用范围有限)
问题四
我想使用类似于 component 组件中的 this 该怎么办,用它跟踪变量的变化,但是不触发 re-render.
答:这个问题前面其实已经给出答案了,那就是使用 useRef。
问题五
以下代码存在什么问题?该如何修改?
最后这个问题留作课后作业吧
The text was updated successfully, but these errors were encountered: