站长网 资讯 effect的清理叙述并不完全准确原因是什么

effect的清理叙述并不完全准确原因是什么

在前面的描述中或多或少涉及到对于effect的清理,只是为了便于一个理解,但描述并不完全准确。 例如下面的例子: useEffect(()={ ChatAPI.subscribeToFriendStatus(props.id,handleStatusChange); return()={ ChatAPI.unsubscribeFromFriendStatus(props.i

在前面的描述中或多或少涉及到对于effect的清理,只是为了便于一个理解,但描述并不完全准确。

例如下面的例子:

useEffect(() => { 

  ChatAPI.subscribeToFriendStatus(props.id, handleStatusChange); 

  return () => { 

    ChatAPI.unsubscribeFromFriendStatus(props.id, handleStatusChange); 

  }; 

}); 

假设第一次渲染的时候props是{id: 10},第二次渲染的时候是{id: 20}。你可能会认为发生了下面的这些事:

React 清除了 {id: 10}的effect。

React 渲染{id: 20}的UI。

React 运行{id: 20}的effect。

但是实际情况并非如此,如果按照这种心智模型来理解,那么在清除时候,获取的值是之前的旧值,因为清除是在渲染新UI之前完成的。这和之前说到的React只会在浏览器绘制之后执行effects矛盾。

React这样做的好处是不会阻塞浏览器的一个渲染(屏幕更新)。当然,按照这个规则,effect的清除也被延迟到了浏览器绘制UI之后。那么正确的执行顺序应该是:

React渲染了id 20 的UI

React清除了id 10的effect

React运行id 20的effect

那么为啥effect里清除的是旧的呐?

组件内的每一个函数(包括事件处理函数,effects,定时器或者API调用等等)会捕获定义它们的那次渲染中的props和state。

那么,effect的清除并不会读取到“最新”的props,它只能读取到定义它那次渲染中props的值

人类发展的进程中淘汰的永远都是不思进取的守旧派。React中亦是如此思想,或许激进,但大多数人们总期待“新桃换旧符”。

本文来自网络,不代表站长网立场,转载请注明出处:https://www.zwzz.com.cn/html/biancheng/zx/2021/0523/4669.html

作者: dawei

【声明】:站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。
联系我们

联系我们

0577-28828765

在线咨询: QQ交谈

邮箱: xwei067@foxmail.com

工作时间:周一至周五,9:00-17:30,节假日休息

返回顶部