What is react?

[zhouzhongyuan]

定义

源码探究

• reactjs源码分析-上篇（首次渲染实现原理）

• reactjs源码分析-下篇（更新机制实现原理）

• 深入理解react（源码分析）

• React源码分析3 — React生命周期详解

资源集合

• brillout/awesome-react-components

• vasanthk/react-bits

名词解释

• reconciliation 一致化
• receiveComponent中的receive
  对...做出反应
  接受
  不知道哪个更准确

Question

• Reconciler，在react中代表什么意思？ 协调器？协调器干嘛的？

Even vastly different renderers like React DOM and React Native need to share a lot of logic. In particular, the reconciliation algorithm should be as similar as possible so that declarative rendering, custom components, state, lifecycle methods, and refs work consistently across platforms.

To solve this, different renderers share some code between them. We call this part of React a “reconciler”. When an update such as setState() is scheduled, the reconciler calls render() on components in the tree and mounts, updates, or unmounts them.

Reconcilers are not packaged separately because they currently have no public API. Instead, they are exclusively used by renderers such as React DOM and React Native.
https://reactjs.org/docs/codebase-overview.html#reconcilers

---

Building React From Scratch - YouTube

• zpao/building-react-from-scratch: Code for my React Rally talk.
• Implementation Notes - React

[zhouzhongyuan]

就像所有的component都实现了mountComponent来处理第一次渲染，所有的componet类都应该实现receiveComponent用来处理自己的更新。

• my-react
• _reactInternalInstance是什么？_instance是什么？一定要知道继承关系
• 直接跑源代码是个好方法，一步一步调试。

[zhouzhongyuan]

1. createElement

用法

var element = React.createElement('div',{id:'test',onclick:hello},'click me');

输入

type,config,children

输出

  this.type = type;
  this.key = key;
  this.props = props;

2. createClass

用法

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {type: 'say:'};
  },
  componentWillMount: function() {
    console.log('我就要开始渲染了。。。')
  },
  componentDidMount: function() {
    console.log('我已经渲染好了。。。')
  },
  render: function() {
    return React.createElement("div", null,this.state.type, "Hello ", this.props.name);
  }
});

输入

包含render方法的对象。

输出

一个构造函数

3. ReactCompositeComponent.prototype.mountComponent函数中引用

    var inst = new ReactClass(publicProps);
    this._instance = inst;

3.1 此处的this是什么？

ReactCompositeComponent返回的对象，类似：

    this._currentElement = element;
    this._rootNodeID = null;
    this._instance = null;

3.2 this._instance

    var inst = new ReactClass(publicProps);
    this._instance = inst;

ReactClass是一个构造函数，即下面的Constructor

createClass:function(spec){
        //生成一个子类
        var Constructor = function (props) {
            this.props = props;
            this.state = this.getInitialState ? this.getInitialState() : null;
        }
        //原型继承，继承超级父类
        Constructor.prototype = new ReactClass();
        Constructor.prototype.constructor = Constructor;
        //混入spec到原型
        $.extend(Constructor.prototype,spec);
        return Constructor;

    }

可以看出this._instance是一个对象，对象包含props和state属性，[[prototype]]中的指向Constructor的prototype。

3.3 this._renderedComponent

    //调用ReactClass的实例的render方法,返回一个element或者一个文本节点
    var renderedElement = this._instance.render();
    //得到renderedElement对应的component类实例
    var renderedComponentInstance = instantiateReactComponent(renderedElement);
    this._renderedComponent = renderedComponentInstance; //存起来留作后用

3.4 this._reactInternalInstance为什么可以被取到？

ReactClass.prototype.setState中为什么可以取得_reactInternalInstance。
因为

    // Initialize the public class
    var inst = new ReactClass(publicProps);
    this._instance = inst;
    //保留对当前comonent的引用，下面更新会用到
    inst._reactInternalInstance = this;

原型引用。inst -> Constructor -> ReactClass.

[zhouzhongyuan]

react diff

diff 策略

• 1. Web UI 中 DOM 节点跨层级的移动操作特别少，可以忽略不计。
• 2. 拥有相同类的两个组件将会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构。
• 3. 对于同一层级的一组子节点，它们可以通过唯一 id 进行区分。

基于以上三个前提策略，React 分别对 tree diff、component diff 以及 element diff 进行算法优化，事实也证明这三个前提策略是合理且准确的，它保证了整体界面构建的性能。

• tree diff

• component diff

• element diff

——twobin

[zhouzhongyuan]

component 分类

总结： Presentational and Container Components – Dan Abramov – Medium
下表中，Component被人为分成了很多类型，没有一个同意分类标准。同一列基本同一个意思，同一行是对应关系。

Component1	Component2
Container	Presentational
Fat	Skinny
Smart	Dumb,
Stateful	Pure
Screens	Components

[zhouzhongyuan]

React Internals, Part Three: basic updating - Matt Greer

render(总)

getTopLevelComponentInContainer

renderNewRootComponent

updateRootComponent
prevComponent.receiveComponent(nextElement)

DOMComponent receiveComponent

CompositeComponent receiveComponent

React Internals, Part Four: setState - Matt Greer

[zhouzhongyuan]

React Internals

阅读

• React Internals gitbook版
• React Internals web版

重点

• public instance: componentInstance, Constructor的实例。setState
• internal instance: FeactCompositeComponentWrapper的实例
• Internal instance knows about the public instance, since it wraps(包裹) it
• public instance想要和internal instance沟通

To avoid the confusion, we will call instances of CompositeComponent and DOMComponent “internal instances”. They exist so we can associate some long-lived data with them. Only the renderer and the reconciler are aware that they exist.
In contrast, we call an instance of the user-defined class a “public instance”. The public instance is what you see as this in the render() and other methods of your custom components.

[zhouzhongyuan]

feact

重点

• render
• lifecycle
• basic update
• setState
• batch update
• transaction

basic update

compositeComponent的updateComponent非常简单。（假设type没有变）

代码如下

updateComponent(prevElement, nextElement){
    this._currentElement = nextElement;
    this._instance.props = nextElement.props;   //更新此Component的props

    //update rendered component
    const nextRenderedElement = this._instance.render(); // 重新执行此Component的render
    this._renderedComponent.receiveComponent(nextRenderedElement) // childComponentInstance开始更新
}

用人话说，就是

1. 把新的props传给public instance;
2. 重新render此instance，生成新的element;
3. 对旧的internal instance执行receiveComponent

收获

• 代码是写出来的，不是看出来的！

setState

• 仅仅在basic update的基础上，添加了’state‘，非常简单。

实现中，遇到的问题

basic update 时，dom

[zhouzhongyuan]

• React.js 小书