React中的PureComponent和Component在内部实现上有什么不同？

Question

我在昨天的求职面试中被问到一个问题：What are the internal implementation differences between PureComponent and Component in React，我对这个问题缺乏了解，把我的面试搞砸了。

我知道它们之间的详细区别，包括React文档中的所有内容，以及何时和如何使用它们，但我不知道它们在React源代码中的实现。

你能给我一些这个问题的简要总结，以及如何浏览React的源代码以获得更深层次的知识的一些建议吗？

Answer 1

纯组件和普通组件实际上是相同的，除了普通组件不会为您处理生命周期方法shouldComponentUpdate()这一事实。在纯组件中，当属性或状态发生变化时，纯组件将通过对属性和状态进行浅层比较来自动检查，以查看组件是否需要重新呈现。

常规组件不会进行这种比较(除非您自己在shouldComponentUpdate()中指定了一些比较)。

你可以在differences here上找到一篇很好的文章。以及实际的源代码差异here

这是实际的代码差异。

if (ctor.prototype && ctor.prototype.isPureReactComponent) {
  return (
    !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
  );
}

Answer 2

唯一的区别是PureComponent有一个预定义的shouldComponentUpdate。您可以在当前的react code on github中看到它

if (ctor.prototype && ctor.prototype.isPureReactComponent) {
  return (
    !shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState)
  );
}

它只是简单地检查props和state中是否存在浅层相等。