[译]React如何区别class和function

原文 How Does React Tell a Class from a Function?

译注：

一分钟概览——

React最后采用了在React.Component上加入isReactComponent标识作为区分。

1.在这之前，考虑了ES6的区分方法，但是由于Babel的存在，这个方法不可用。

2.总是调用new，对于一些纯函数组件不适用。而且对箭头函数使用new会出错。

3.把问题约束到React组件下，通过判定原型链来做，但是可能有多个React实例导致判定出错，所以在原型上添加了标识位，标识位是一个对象，因为早期Jest会忽略普通类型如Boolean型。

4.API检测也是可行的，但是API的发展无法预测，每个检测都会带来额外的损耗，所以不是主要做法，但是在现在版本里已经加入了render检测，用来检测prototype.render存在，但是prototype.isReactComponent不存在的场景，这样会抛出一个warning。

以下正文。

思考一下下面这个使用function定义的Greeting组件：

function Greeting() {
  return Hello;
}

React也支持class定义：

class Greeting extends React.Component {
  render() {
    return Hello;
  }
}

(直到最近，这是唯一可以使用类似state这种功能的方法。)

当你在使用<Greeting />组件时，其实并不关心它是怎么定义的。

// Class or function — whatever.

但是React自己是关心这些不同的！

如果Greeting是一个函数，React需要去调用它：

// Your code
function Greeting() {
  return Hello;
}

// Inside React
const result = Greeting(props); // Hello

但是如果Greeting是类，React就需要用new关键字去实例化一个对象，然后立刻调用它的render方法。

// Your code
class Greeting extends React.Component {
  render() {
    return Hello;
  }
}

// Inside React
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // Hello

React有一个相同的目的——得到一个渲染完毕的node（在这个例子里，<p>Hello</p>）。但是如果定义Greeting决定了剩下的步骤。

所以React是如何知道一个组件是类还是函数？

就像我之前的博客，你不需要知道这个东西对于React而言的效果。我同样好几点不了解这些。请不要把这个问题变成一个面试题。事实上，比起React，这篇博客更关注于JavaScript。

这篇博客写给那些富有好奇心的读者，他们想知道为什么React能以一种确定的方式工作。你是这样的人吗？一起深入探讨吧！

这是一段漫长的旅程。这篇博客不会写很多关于React的东西，但是会一掠JavaScript本身的风采，诸如：new,this,class,箭头函数,prototype,__proto__,instanceof，以及这些东西如何在JavaScript中合作。幸运的是，在你使用React的时候，你不必想太多这些事。

---

首先，我们需要明白为什么区分函数和类如此重要。注意我们怎么使用new操作符去调用一个类：

// If Greeting is a function
const result = Greeting(props); // Hello

// If Greeting is a class
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // Hello

先来对new操作符做了什么给出一个粗浅的定义。

---

以前，JavaScript没有类的概念。然而，你也可以用纯函数去描述一种近似于类的模式。具体而言，你可以在调用函数之前，添加new，就可以使用任何类似于类构造器的函数了。

// Just a function
function Person(name) {
  this.name = name;
}

var fred = new Person('Fred'); // ✅ Person {name: 'Fred'}
var george = Person('George'); //