虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。 类组件可以使用其他特性，如状态 state 和生命周期钩子。 当组件只是接收 pro…

1. 前言 2. 组件化 到现在 三大框架 一统天下, 组件 成了不可或缺的一部分, 各种 UI 库 层出不穷. 最火的还是当属 antd , 于是 我觉得 借鉴 (抄袭) 一波, 开始干活了 3. 搭建项目 原理很简单,先通过 webpack 打包文档, 然后 git add…

当渲染一个组件的数据是通过props从父组件中获取时，通常情况下是 A --> B，但随着业务复杂度的增加，有可能是这样的：A --> B --> C --> D --> E，E需要的数据需要从A那里通过props传递过来，以及对应的 E --> A逆向传递callback。组…

动画是 ReactJs 应用程序中一个热门话题，我们有很多方法可以创建不同类型的动画。例如，很多开发人员就喜欢使用 css 动画。但如果你想创建更复杂的动画，你可以关注 GreenSock 。GreenSock 是最具影响力的动画平台，同时，它给 React 提供了很多用于创建…

React的虚拟Dom和其diff算法，是React渲染效率远远高于传统dom操作渲染效率的主要原因。一方面，虚拟Dom的存在，使得在操作Dom时，不再直接操作页面Dom，而是对虚拟Dom进行相关操作运算。再通过运算结果，结合diff算法，得出变更过的部分Dom，进行局部更新。…

在React中，组件的更新本质上都是由setState操作改变state引起的。因此组件更新的入口在于setState，同样经过撸源码和打断点分析画了以下的组件更新的流程图： 这里需要注意enqueueUpdate中根据batchingStrategy.isBatchingUp…

以下几个问题是我们在实际开发中经常会遇到的场景，下面用几个简单的示例代码来还原一下。 3.更新时会把每个组件的更新合并，每个组件只会触发一次更新的生命周期。 由于源码比较复杂，就不贴在这里了，有兴趣的可以去github上clone一份然后按照下面的流程图去走一遍。 1.将set…

大家好，我是神三元，这一次，让我们来以React为例，把服务端渲染(Server Side Render，简称“SSR”)学个明明白白。 这一部分来简要实现一个React组件的SSR。 一. SSR vs CSR 废话不多说，直接起一个express服务器。 启动之后打开loc…

生命周期，顾名思义，就是从生到死的过程。 而生命周期钩子，就是从生到死过程中的关键节点。 每到关键节点，我们总希望有一些沉思时刻，因为这时候做出的决策会改变人生的走向。 React组件也一样，它会给开发者一些沉思时刻，在这里，开发者可以改变组件的走向。 React花了两年时间祭…