React TinyReact

现在(2018年) react在前端开发领域已经越来越🔥了，我自己也经常在项目中使用 react，但是却总是好奇 react的底层实现原理，多次尝试阅读 react源代码都无法读下去，确实太难了。前不久在网上看到几篇介绍如何自己动手实现 react的文章，这里基于这些资料，并加入一些自己的想法，从0开始仅用 200行代码实现一个 简版react，相信看完后大家都会对 react的内部实现原理有更多了解。但是在动手之前我们需要先掌握几个 react相关的重要概念，比如 组件(类)与 组件实例的区别、 diff算法以及 生命周期 等，下面依次介绍下，熟悉完这些概念我们再动手实现。 首先我们需要弄明白几个容易混淆的概念，最开始学习 react的时候我也有些疑惑他们之间有什么不同，前几天跟一个新同学讨论一个问题，发现他竟然也分不清 组件和 组件实例，因此很有必要弄明白这几个概念的区别于联系，本篇后面我们实现这个 简版react 也是基于这些概念。 Component（组件） instance（组件实例） element 前面已经提到了 element，即 类组件的 render方法以及 函数式组件的返回值均为 element。那么这里的 element到底是什么呢？其实很简单，就是一个纯对象（ plain object），而且这个纯对象包含两个属性： type:(string|ReactClass)和 props:Object，注意 element并不是 组件实例，而是一个纯对象。 虽然element不是组件实例，但是又跟组件实例有关系，element是对组件实例或者dom节点的描述。如果 type是 string类型，则表示 dom节点，如果 type是 function或者 class类型，则表示 组件实例。比如下面两个 element分别描述了一个 dom节点和一个 组件实例 ： { type: 'button', props: { className: 'button button-blue', children: { type: 'b', props: { children: 'OK!'