Passer_By75663

点击进入React源码调试仓库。 本文是在React中的高优先级任务插队机制基础上的后续延伸，先通过阅读这篇文章了解任务调度执行的整体流程，有助于更快地理解本文所讲的内容。 饥饿问题说到底就是高优先级任务不能毫无底线地打断低优先级任务，一旦低优先级任务过期了，那么他就会被提升到…

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

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

点击进入React源码调试仓库。 当render阶段完成后，意味着在内存中构建的workInProgress树所有更新工作已经完成，这包括树中fiber节点的更新、diff、effectTag的标记、effectList的收集。此时workInProgress树的完整形态如下：…

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

当函数组件进入render阶段时，会被renderWithHooks函数处理。函数组件作为一个函数，它的渲染其实就是函数调用，而函数组件又会调用React提供的hooks函数。初始挂载和更新时，所用的hooks函数是不同的，比如初次挂载时调用的useEffect，和后续更新时调…

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

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

在前端开发中，有些时候会遇到根据鼠标当前位置为原点，滚动滚轮实现图片、canvas、DOM元素缩放的需求。有些同学可能觉得有点难，但其实借助线性代数中的矩阵运算，可以非常容易地实现这一功能