React 源码阅读 ── Component()

// React.js
import {Component, PureComponent} from './ReactBaseClasses';

// ReactBaseClasses
function Component(props, context, updater) { }
function PureComponent(props, context, updater) { }

ComponentPureComponent两个基础 class 定义在 ReactBaseClasses.js中,实现也比较简单

1. Component

function Component(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  // 初始化 updater,一般通过渲染函数注入
  this.updater = updater || ReactNoopUpdateQueue;
}

在 ReactBaseClasses.js 中,定义了一个 Component 构造函数,将 props 和 context 作为构造函数的属性,后续的更新主要通过 updater 去实现,因为端的差异性,每个端的 updater 由每个端自己实现

Component.prototype.isReactComponent = {};
Component.prototype.setState = function(partialState, callback) {
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};

定义构造函数之后,在Component构造函数的原型定义了一些方法

  • isReactComponent:空对象
  • setState:最常用的 API,用于Component的状态改变,具体由updater对象上的enqueueSetState属性实现
  • forceUpdate:强制更新,具体由updater对象上面的enqueueForceUpdate属性实现

2. PureComponent

function ComponentDummy() {}
ComponentDummy.prototype = Component.prototype;

在定义PureComponent之前,定义了一个虚拟的ComponentDummy构造函数,原型指向Component的原型对象

function PureComponent(props, context, updater) {
  this.props = props;
  this.context = context;
  // If a component has string refs, we will assign a different object later.
  this.refs = emptyObject;
  this.updater = updater || ReactNoopUpdateQueue;
}

PureComponent的定义和Component定义处理完全一样

const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
pureComponentPrototype.constructor = PureComponent;
// Avoid an extra prototype jump for these methods.
Object.assign(pureComponentPrototype, Component.prototype);
pureComponentPrototype.isPureReactComponent = true;
  • 继承Component原型上的属性
  • PureComponent的原型加上isPureReactComponent属性,值为true
上次更新: 1/25/2019, 10:46:07 PM