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

不愿清醒，宁愿一直沉迷放纵。 不知归路，宁愿一世无悔追逐。 --- 王小波 redux是的诞生是为了给 React 应用提供「可预测化的状态管理」机制。 提供subscribe，dispatch，getState这些方法。 按步骤手把手实战。 不就ok了吗？这就是 react-…

react自从2013年推出到如今已经走过了很多个年头，react生态redux、react-redux、redux-saga也已经成为react开发者的配套标准，使用起来已经相当熟悉，本文简单聊聊redux、react-redux和redux-saga的实现原理。 这张经典的…

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

下面是我阅读过源码后，将所有的执行流程总结出来的流程图，不会贴代码，如果你想阅读代码看看具体是如何实现的，可以根据流程图去源码里寻找。 组件装载 / 更新。 通过lastProps、nextProps判断是否新增、删除事件分别调用事件注册、卸载方法。 获取document对象。…

本文以 react-virtual-list 组件为基础进行分析了虚拟列表的一种实现方案

React的虚拟DOM和Diff算法是React的非常重要的核心特性，这部分源码也非常复杂，理解这部分知识的原理对更深入的掌握React是非常必要的。 本来想将虚拟DOM和Diff算法放到一篇文章，写完虚拟DOM发现文章已经很长了，所以本篇只分析虚拟DOM。 本篇文章从源码出发…

本文作为自己深入学习 React Fiber (Reactv16.8.6)的理解，本篇仅介绍大致流程，Fiber 详细源码本文不作细节描述。 首先要知道的是，JavaScript 引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待。 在这样的机制下…

.为什么需要构建工具转换 ES6 语法转换 JSXCSS 前缀补全/预处理器压缩混淆图片压缩...欢迎补充2