最近看了Dan Abramov的一些博客，学到了一些React的一些有趣的知识。决定结合自己的理解总结下。这些内容可能对你实际开发并没有什么帮助，不过这可以让你了解到更多React底层实现的内容以及为什么要怎样实现。可以让你跟别人有更多的谈资，当然，也可以在某些场合装一下逼。那么接下来直接进入正文。

React如何区分类组件和函数组件

我们可以考虑从几种方式：

统一使用new方法来生成实例

问题：

• 对于函数组件而言，这样会让它们生成一个多余的this作为对象实例。

• 对于箭头函数而言，会报错。因为箭头函数并没有this,它的this是取自于定义这个箭头函数所在环境的this

  const fun = () => console.log(2); new fun(); // Uncaught TypeError: fun is not a constructor

• 使用new会妨碍函数组件返回原始类型(string、number等)。

  我们都知道，使用new操作符后，只有当函数返回非null 和非undefined的对象的时候，返回值才会生效。否则new操作符的返回值都会是对象。关于new操作符详细的内容可以点击这里

  function Greeting() {   return 'Hello'; }  // 并不会返回字符串 new Gretting(); // Gretting {}

综上所述，这个方法不可行。

通过instanceof来判断

不知道你有没有察觉，我们写React的类组件的时候，我们都需要通过extends React.Component的方式来写。那么，我们是否可以通过以下方式来判断呢？

class A extends React.Component { }  A.prototype instanceOf React.Component; // true

通过这种方式，我们确实可以区分类组件和函数组件，可是也存在一些问题：

• 箭头函数没有prototyoe

  这个问题其实好解决，如下

  function getType(Component) {   if (Component.prototyoe && Component.prototype instance React.Component) {     return 'class';   }    return 'function'; }

• 对于一些项目(虽然很少)可能存在着多个React副本，并且我们目前要检查的组件它继承的React.Component是来自于另一个React副本的，这就会出现问题。这个问题的话就没办法解决了。因此这种方式也存在问题。

通过为React.Component增加一个特别的标记