![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 65
清风_1998
这个作者很懒,什么都没留下…
展开
-
react hooks实现原理(useState为例)
一、源代码逻辑十分绕,建议多敲几遍。let isMount = true; // 判断是挂载还是更新let workInProgressHook;// App组件对应的fiber对象const fiber = { memorizedState: null, // 当前hook的相关信息 stateNode: App}function schedule() { // 更新前将workInProgressHook重置为fiber保存的第一个Hook workI原创 2021-08-22 11:21:19 · 658 阅读 · 1 评论 -
浅谈react-fiber
浅谈React Fiber一、出现的缘由在页面元素很多,且需要频繁刷新的场景下,React 15 会出现掉帧的现象。请看以下例子:其根本原因,是大量的同步计算任务阻塞了浏览器的 UI 渲染。默认情况下,JS 运算、页面布局和页面绘制都是运行在浏览器的主线程当中,他们之间是互斥的关系。如果 JS 运算持续占用主线程,页面就没法得到及时的更新。当我们调用setState更新页面的时候,React 会遍历应用的所有节点,计算出差异,然后再更新 UI。整个过程是一气呵成,不能被打断的。如果页面元素很多,原创 2021-06-24 23:17:13 · 484 阅读 · 2 评论