class Counter extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { count: 1 };
  }

  render() {
    return (
      <button color={this.props.color} onClick={() => this.setState((state) => ({ count: state.count + 1 }))}>
        Count: {this.state.count}
      </button>
    );
  }
}

const Button = (props) => <button onClick={props.onClick}>{props.text}</button>;

function MyComponent(props) {
  /* 使用 props 渲染 */
}

// 比较函数
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  返回 true，复用最近一次渲染
  返回 false，重新渲染
  */
}

export default React.memo(MyComponent, areEqual);

// FriendsItem 在父组件引用样式
<FriendsItem key={friend.id} name={friend.name} id={friend.id} onDeleteClick={() => this.deleteFriends(friend.id)} />
// 在父组件中绑定
// 父组件在 props 中传递了一个箭头函数。箭头函数在每次 render 时都会重新分配（和使用 bind 的方式相同）

// 其中 FriendsItem 为 PureComponent
class FriendsItem extends React.PureComponent {
  render() {
    const { name, onDeleteClick } = this.props;
    console.log(`FriendsItem：${name} 渲染`);
    return (
      <div>
        <span>{name}</span>
        <button onClick={onDeleteClick}>删除</button>
      </div>
    );
  }
}
// 每次点击删除操作时，未删除的 FriendsItem 都将被重新渲染

// FriendsItem 在父组件引用样式
<FriendsItem key={friend.id} id={friend.id} name={friend.name} onClick={this.deleteFriends} />

class FriendsItem extends React.PureComponent {
  onDeleteClick = () => {
    this.props.onClick(this.props.id);
  }; // 在子组件中绑定
  render() {
    const { name } = this.props;
    console.log(`FriendsItem：${name} 渲染`);
    return (
      <div>
        <span>{name}</span>
        <button onClick={this.onDeleteClick}>删除</button>
      </div>
    );
  }
}
// 每次点击删除操作时，FriendsItem 都不会被重新渲染

render() {
  const { posts } = this.props
  // 在渲染函数中生成 topTen，并渲染
  const topTen = [...posts].sort((a, b) =>
    b.likes - a.likes).slice(0, 9)
  return //...
}
// 这会导致组件每次重新渲染，都会生成新的 topTen，导致不必要的渲染

componentWillMount() {
  this.setTopTenPosts(this.props.posts)
}
componentWillReceiveProps(nextProps) {
  if (this.props.posts !== nextProps.posts) {
    this.setTopTenPosts(nextProps.posts)
  }
}
// 每次 posts 更新时，更新派生 state，而不是在渲染函数中重新生成
setTopTenPosts(posts) {
  this.setState({
    topTen: [...posts].sort((a, b) => b.likes - a.likes).slice(0, 9)
  })
}

// 新建了空方法ComponentDummy ，ComponentDummy 的原型 指向 Component 的原型;
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;
} // 解析同 React.Component，详细请看上一章

/**
 * 实现 React.PureComponent 对 React.Component 的原型继承
 */
/**
 * 用 ComponentDummy 的原因是为了不直接实例化一个 Component 实例，可以减少一些内存使用
 *
 * 因为，我们这里只需要继承 React.Component 的 原型，直接 PureComponent.prototype = new Component() 的话
 * 会继承包括 constructor 在内的其他 Component 属性方法，但是 PureComponent 已经有自己的 constructor 了，
 * 再继承的话，造成不必要的内存消耗
 * 所以会新建ComponentDummy，只继承Component的原型，不包括constructor，以此来节省内存。
 */
const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());

// 修复 pureComponentPrototype 构造函数指向
pureComponentPrototype.constructor = PureComponent;

// Avoid an extra prototype jump for these methods.
// 虽然上面两句已经让PureComponent继承了Component
// 但多加一个 Object.assign()，能有效的避免多一次原型链查找
Object.assign(pureComponentPrototype, Component.prototype);

// 唯一的区别，原型上添加了 isPureReactComponent 属性去表示该 Component 是 PureComponent
// 在后续组件渲染的时候，react-dom 会去判断 isPureReactComponent 这个属性，来确定是否浅比较 props、status 实现更新
/** 在 ReactFiberClassComponent.js 中，有对 isPureReactComponent 的判断
 if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    return (
      !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
    );
  }
 */
pureComponentPrototype.isPureReactComponent = true;

// ReactFiberClassComponent.js
function checkShouldComponentUpdate(workInProgress, ctor, oldProps, newProps, oldState, newState, nextContext) {
  // ...
  if (ctor.prototype && ctor.prototype.isPureReactComponent) {
    // 如果是纯组件，比较新老 props、state
    // 返回 true，重新渲染，
    // 即 shallowEqual props 返回 false，或 shallowEqual state 返回 false
    return !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState);
  }
  return true;
}

/**
 * 通过遍历对象上的键并返回 false 来执行相等性
 * 在参数列表中，当任意键对应的值不严格相等时，返回 false。
 * 当所有键的值严格相等时,返回 true。
 */
function shallowEqual(objA: mixed, objB: mixed): boolean {
  // 通过 Object.is 判断 objA、objB 是否相等
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }

  // 参数列表
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  // 参数列表长度不相同
  if (keysA.length !== keysB.length) {
    return false;
  }

  // 比较参数列表每一个参数，但仅比较一层
  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;
}