React Hooks 源码解析（1）：类组件、函数组件、纯组件

// Class Componmentclass Welcome extends React.Component {  render() {    return <h1>Hello, {this.props.name}</h1>;  }}

// Functional Componmentfunction Welcome(props) {  return <h1>Hello, {props.name}</h1>;}

/** * Base class helpers for the updating state of a 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;  // We initialize the default updater but the real one gets injected by the  // renderer.  // 不同平台 updater 不一样  this.updater = updater || ReactNoopUpdateQueue;}
Component.prototype.isReactComponent = {};Component.prototype.setState = function(partialState, callback) {  // 略};
Component.prototype.forceUpdate = function(callback) {  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');};
function ComponentDummy() {}ComponentDummy.prototype = Component.prototype;

/** * Convenience component with default shallow equality check for sCU. */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;}
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;

// packages/react-reconciler/src/ReactFiberClassComponent.js
function checkShouldComponentUpdate(  workInProgress,  ctor,  oldProps,  newProps,  oldState,  newState,  nextContext,) {  const instance = workInProgress.stateNode;  if (typeof instance.shouldComponentUpdate === 'function') {    startPhaseTimer(workInProgress, 'shouldComponentUpdate');    const shouldUpdate = instance.shouldComponentUpdate(      newProps,      newState,      nextContext,    );    stopPhaseTimer();
    return shouldUpdate;  }
  if (ctor.prototype && ctor.prototype.isPureReactComponent) {    return (      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)    );  }
  return true;}

import is from './objectIs';
const hasOwnProperty = Object.prototype.hasOwnProperty;
/** * Performs equality by iterating through keys on an object and returning false * when any key has values which are not strictly equal between the arguments. * Returns true when the values of all keys are strictly equal. */function shallowEqual(objA: mixed, objB: mixed): boolean {  // 通过 is 函数对两个参数进行比较，判断是否相同，相同直接返回true：基本数据类型值相同，同一个引用对象都表示相同  if (is(objA, objB)) {    return true;  }
  // 如果两个参数不相同，判断两个参数是否至少有一个不是引用类型，是即返回false  if (    typeof objA !== 'object' ||    objA === null ||    typeof objB !== 'object' ||    objB === null  ) {    return false;  }
  // 如果两个都是引用类型对象，则继续下面的比较  // 判断两个不同引用类型对象是否相同  // 先通过 Object.keys 获取到两个对象的所有属性，具有相同属性，且每个属性值相同即两个对相同（相同也通过is函数完成）  const keysA = Object.keys(objA);  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) {    return false;  }
  // Test for A's keys different from B.  for (let i = 0; i < keysA.length; i++) {    if (      !hasOwnProperty.call(objB, keysA[i]) ||      !is(objA[keysA[i]], objB[keysA[i]])    ) {      return false;    }  }
  return true;}
export default shallowEqual;

// Object.is，排除了===两种不符合预期的情况：// 1. +0 === -0  // true// 2. NaN === NaN // falsefunction is(x, y) {  if (x === y) {    return x !== 0 || y !== 0 || 1 / x === 1 / y;  } else {    return x !== x && y !== y;  }}

import React, { memo } from 'react';
const ToTheMoonComponent = React.memo(function MyComponent(props) {    // only renders if props have changed});