编程小思
首发于编程小思

从零造 React 之 —— Preparation

最近花了一段时间阅读了一个 React 的最小实现,并结合自己的想法和理解写了一个系列博客,意图是用最简单和清晰的语言讲清楚 React 的两个核心功能,Mounting 和 Updating。这个系列文章的初稿已全部完成,包含全部源码、demo 和博客,可以点这个 repo 查看(求 star 求关注 _(:з」∠)_)。


这个系列博客总共有六篇,目录如下:

  • Day 1 - Preparation
  • Day 2 - Mounting, Part I
  • Day 3 - Mounting, Part II
  • Day 4 - `setState` & Updating
  • Day 5 - Virtual DOM Diff Algorithm
  • Day 6 - Updating the Real DOM

本篇我们来做一下阅读 React 源码需要做的准备工作。


要阅读 React 源码,你并不需要是一个非常有经验的 React 开发者。在学习了半个月之后,我个人认为,你甚至不需要会 React,理论上依旧也可以达到目的。但是,对 React 有一个良好的使用经验可以在你阅读源码的时候起到一个对照和辅助作用,这一点是十分有帮助的。

在阅读 React 源码之前,最重要的一个概念是搞明白这个问题:

在 React 里,Component, Element, Instance 之间有什么区别和联系?

Answer:

  • Element 是一个纯 JavaScript Object。React 正是使用它来描述整个 DOM 树的结构。对于每一个组件来说,render 函数返回的也正是一个 element,而不是真正的 DOM 节点。我们使用的 JSX,其实是 React.createElement 函数的语法糖,这个函数返回的是 Element。它的结构是:
{
  type: 'div',
  props: {
    className,
    children,
  }
}

其中,children 的数据结构是 Element 的数组,或者单个 Element。由此,Element 的数据结构满足了递归的需要。


  • Component 是我们最常写的“组件”,有以下几种类型:
    • DOMComponent: `div, span, ul` 等
    • Composite Component: 复合组件,又分为 functional component 和 class component
    • TextComponent: number or string

由于我们在使用 React 实现组件化的时候,使用的有且只有 Composite Component,所以,我们的每一个组件,其实都是一个 Component。但是当 React 试图去 render 这些组件的时候,会将 Element 转化成 Component,进而转化成真正的 DOM 节点


  • Instance 是 Component 的实例化之后的对象,我们在 Component 中使用的 `this` 就是 instance。这也是 `setState` 和诸多生命周期函数所在的地方。从这一点出发,可以把 Component 理解为 Class,instance是实例化后的结果。


在解决这个问题之后,遇到 React 代码里的函数名和参数中带有 "element", "component" 的,一定要自动条件反射到对应的概念,比如说 `instantiateComponent`, `mountComponent`,`createElement`,等等。

除此之外,如果你还没有信心直接开始阅读源码,建议(按次序)阅读以下三篇官方的 React Advanced Guide。对于理解 React 的架构和一些重要概念很有帮助。


JSX In Depth - Reactreactjs.org图标Implementation Notes - Reactreactjs.org图标Reconciliation - Reactreactjs.org图标


Ask yourself Before Move On

在开始之前,为了检查一下本篇的学习成果,不妨问一下自己这几个问题,也欢迎大家在评论区讨论。

  • What is the difference between components, elements, instances in React
  • How does React use the element tree, instead of instances to compose the DOM structure
  • What is the advantage(s) of using the element tree
  • How does the React recursively work out a final DOM tree from a mixture of DOM components and React components during the render process

编辑于 2018-03-03

文章被以下专栏收录