最新文章

标签:
全部
React源码剖析
网络协议
随便写写
JavaScript
Vue
源码阅读
React
Redux

React中的任务饥饿行为

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 本文是在React中的高优先级任务插队机制(httpswwwnerohtcomarticledetail)基础上的后续延伸,先通过阅读这篇文章了解任务调度执行的整体流程,有助于更快地理解本文所讲的内容。 饥饿问题说到底就是高优先级任务不能毫无底线地打断低优先级任务,一

React中的高优先级任务插队机制

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 在React的concurrent模式下,低优先级任务执行过程中,一旦有更高优先级的任务进来,那么这个低优先级的任务会被取消,优先执行高优先级任务。等高优先级任务做完了,低优先级任务会被重新做一遍。 我们用一个具体的例子来理解一下高优先级任务插队。 有这样一个组件,

Concurrent模式下React的更新行为- 优先级模型

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 作为构建用户界面的JavaScript库,React以提升用户交互体验为核心,而实现这一目标较为重要的一点是优先响应用户交互触发的更新任务,其余不那么重要的任务要做出让步,我们把用户交互触发的任务称为高优先级任务,不那么重要的任务称为低优先级任务。 React的Con

深入React合成事件机制原理

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 为什么要自己实现一套事件机制 由于fiber机制的特点,生成一个fiber节点时,它对应的dom节点有可能还未挂载,onClick这样的事件处理函数作为fiber节点的prop,也就不能直接被绑定到真实的DOM节点上。 为此,React提供了一种“顶层注册,事件收集,

一篇长文帮你彻底搞懂React的调度机制原理

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 Scheduler作为一个独立的包,可以独自承担起任务调度的职责,你只需要将任务和任务的优先级交给它,它就可以帮你管理任务,安排任务的执行。这就是React和Scheduler配合工作的模式。 对于多个任务,它会先执行优先级高的。聚焦到单个任务的执行上,会被Sched

React源码 commit阶段详解

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 当render阶段完成后,意味着在内存中构建的workInProgress树所有更新工作已经完成,这包括树中fiber节点的更新、diff、effectTag的标记、effectList的收集。此时workInProgress树的完整形态如下: current树和wo

梳理useEffect和useLayoutEffect的原理与区别

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 React在构建用户界面整体遵循函数式的编程理念,即固定的输入有固定的输出,尤其是在推出函数式组件之后,更加强化了组件纯函数的理念。但实际业务中编写的组件不免要产生请求数据、订阅事件、手动操作DOM这些副作用(effect),这样难免让函数组件变得不那么纯,于是Reac

React hooks 的基础概念:hooks链表

6 个月前
当函数组件进入render阶段时,会被renderWithHooks函数处理。函数组件作为一个函数,它的渲染其实就是函数调用,而函数组件又会调用React提供的hooks函数。初始挂载和更新时,所用的hooks函数是不同的,比如初次挂载时调用的useEffect,和后续更新时调用的useEffect,虽然都是同一个hook,但是因为在两个不同的渲染过程中调用它们,所以本质上他们两个是不一样的。这种

React和DOM的那些事-节点更新

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 React的更新最终要落实到页面上,所以本文主要讲解DOM节点(HostComponent)和文本节点(HostText)的更新,对于前者来说更新是props的更新,对后者来说更新是文字内容的更新。 `commitWork`是节点更新的入口。 ```javascri

React和DOM的那些事-节点新增算法

6 个月前
点击(httpsgithubcomneroneroffyreactsourcecodedebug)进入React源码调试仓库。 本篇是详细解读React DOM操作的第二篇文章,文章所讲的内容发生在commit阶段。 插入DOM节点操作的是fiber节点上的stateNode,对于原生DOM类型的fiber节点来说stateNode存储着DOM节点。commit阶段插入节点的操作就是循着fib