传统的diff算法是使用循环递归对节点进行依次对比，复杂度为O(n^3),效率低下。 针对树结构(tree diff)：对UI层的DOM节点跨层级的操作进行忽略。（数量少） 针对组件结构(component diff)：拥有相同类的两个组件生成相似的树形结构，拥有不同类的两个组…

通俗地来说， JavaScript 事件机制描述的是事件在 DOM 里面的传递顺序，以及我们可以对这些事件做出如何的响应。 假设我们具有一个 ul 元素，其包括很多 li 元素。当我们点击任何一个 li 时，其实我们也点击了 ul ，因为 ul 把所有的 li 元素给“包装”了…

Class组件是我们现在最常见的组件用法，它拥有组件内的状态和生命周期等一些特性。Class组件是最常见的React组件写法，它需要声明一个class并去继承 react 的Component 类。类组件使用范围广泛，它拥有内部状态、生命周期等一系列方法。 函数式组件写法更加简…

1. 引言 工具型文章要跳读，而文学经典就要反复研读。如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章，那么 16.7 带来的 Hooks 就要像文学经典一样反复研读。 Hooks API 无论从简洁程度，还是使用深度角度来看，都大大优于之前生命周期的 …

函数式强调在逻辑处理中不变性。面向对象通过消息传递改变每个Object的内部状态。两者是截然不同的编程思想，都具有自己的优势，也因为如此，才使得我们从 class 组件 转化到 函数组件式，有一些费解。 从 react 的变化可以看出，react 走的道路越来越接近于函数式编程…

首先，我们得明确一点，所谓的 virtual dom，也就是虚拟节点。它通过 JS 的 Object 对象模拟 DOM 中的节点，然后再通过特定的 render 方法将其渲染成真实的 DOM 节点。 其次我们还得知道一点，那就是 virtual dom 做的一件事情到底是啥。我…

应届生小A：在学校用React + antd做过后台管理系统，熟悉React技术栈。 两年前端小B：公司技术栈是React，都用了一年了，我React贼六。 五年前端老C：带团队把公司的粪坑项目用React重构了。React对我来说就跟呼吸一样容易。 小A、小B、老C：要不学学…

本文较长，请耐心读完，相信我定有收货，如果有错误欢迎指正。reconcileChildren这个方法做的事情是对于刚创建的组件，会创建新的子Fiber节点，update组件，将当前组件与该组件在上次更

当我们能够熟练运用React进行前端开发时，不免会对React内部机制产生浓厚的兴趣。组件是什么？是真的DOM吗？生命周期函数的执行依据又是什么呢？ 本篇，我们先来研究React组件的实现与挂载。 上述代码写完后，我们就得到了<A />这个组件，那么我们接下来先弄清楚<A />…