React 如何区分类和函数？

function Greeting() {
  return <p>Hello</p>;
}

class Greeting extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}

// 类还是函数 —— 都可以。
<Greeting />

// 你的代码
function Greeting() {
  return <p>Hello</p>;
}
 
// React 内部
const result = Greeting(props); // <p>Hello</p>

// 你的代码
class Greeting extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}
 
// React 内部
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // <p>Hello</p>

// 如果 Greeting 是函数
const result = Greeting(props); // <p>Hello</p>
 
// 如果 Greeting 是类
const instance = new Greeting(props); // Greeting {}
const result = instance.render(); // <p>Hello</p>

// 只是个函数
function Person(name) {
  this.name = name;
}
 
var fred = new Person('Fred'); // ✅ Person {name: 'Fred'}
var george = Person('George'); // 🔴 不会按预期工作

var fred = new Person('Fred'); // 这个对象就是 Person 内部的 this

function Person(name) {
  this.name = name;
}
Person.prototype.sayHi = function() {
  alert('Hi, I am ' + this.name);
}
 
var fred = new Person('Fred');
fred.sayHi();

class Person {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    alert('Hi, I am ' + this.name);
  }
}
 
let fred = new Person('Fred');
fred.sayHi();

let fred = new Person('Fred');
// ✅  如果 Person 是函数：正常工作
// ✅  如果 Person 是类：也正常工作
 
let george = Person('George'); // 忘记加 `new` 了
// 😳 如果 Person 是构造器风格的函数：行为很迷惑
// 🔴 如果 Person 是类：会立刻报错

class Counter extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}
 
// 🔴 React 不能这样做：
const instance = Counter(props);

function Person(name) {
  // 这里简化了 Babel 的输出：
  if (!(this instanceof Person)) {
    throw new TypeError("Cannot call a class as a function");
  }
  // 我们自己的代码：
  this.name = name;
}
 
new Person('Fred'); // ✅ 正常
Person('George');   // 🔴 不能把类当函数调用

function Greeting() {
  // 我们并不希望这里的 `this` 是某种实例
  return <p>Hello</p>;
}

const Greeting = () => <p>Hello</p>;
new Greeting(); // 🔴 Greeting 不是构造函数

class Friends extends React.Component {
  render() {
    const friends = this.props.friends;
    return friends.map(friend =>
      <Friend
        // `this` 来自 `render` 方法
        size={this.props.size}
        name={friend.name}
        key={friend.id}
      />
    );
  }
}

const Person = (name) => {
  // 🔴 这样写毫无意义！
  this.name = name;
}

(() => {}).prototype // undefined
(function() {}).prototype // {constructor: f}

function Greeting() {
  return 'Hello';
}
 
Greeting(); // ✅ 'Hello'
new Greeting(); // 😳 Greeting {}

// 懒加载
var zeroVector = null;
 
function Vector(x, y) {
  if (x === 0 && y === 0) {
    if (zeroVector !== null) {
      // 复用同一个实例
      return zeroVector;
    }
    zeroVector = this;
  }
  this.x = x;
  this.y = y;
}
 
var a = new Vector(1, 1);
var b = new Vector(0, 0);
var c = new Vector(0, 0); // 😲 b === c

function Answer() {
  return 42;
}
 
Answer(); // ✅ 42
new Answer(); // 😳 Answer {}

class A {}
class B extends A {}
 
console.log(B.prototype instanceof A); // true

function Person() {}
 
console.log(Person.prototype); // 🤪 不是 Person 的原型
console.log(Person.__proto__); // 😳 这才是 Person 的原型

function Person(name) {
  this.name = name;
}
Person.prototype.sayHi = function() {
  alert('Hi, I am ' + this.name);
}
 
var fred = new Person('Fred'); // 设置了 fred.__proto__ = Person.prototype

fred.sayHi();
// 1. fred 有 sayHi 属性吗？没有。
// 2. fred.__proto__ 有 sayHi 属性吗？有。调用它！
 
fred.toString();
// 1. fred 有 toString 属性吗？没有。
// 2. fred.__proto__ 有 toString 属性吗？没有。
// 3. fred.__proto__.__proto__ 有 toString 属性吗？有。调用它！

class Greeting extends React.Component {
  render() {
    return <p>Hello</p>;
  }
}
 
let c = new Greeting();
console.log(c.__proto__); // Greeting.prototype
console.log(c.__proto__.__proto__); // React.Component.prototype
console.log(c.__proto__.__proto__.__proto__); // Object.prototype
 
c.render();      // 在 c.__proto__ (Greeting.prototype) 找到
c.setState();    // 在 c.__proto__.__proto__ (React.Component.prototype) 找到
c.toString();    // 在 c.__proto__.__proto__.__proto__ (Object.prototype) 找到

// `extends` 继承链
Greeting
  → React.Component
    → Object (隐式)
 
// `__proto__` 链
new Greeting()
  → Greeting.prototype
    → React.Component.prototype
      → Object.prototype

// `__proto__` 链
new Greeting()
  → Greeting.prototype // 🕵️ 从这里开始
    → React.Component.prototype // ✅ 找到了！
      → Object.prototype

let greeting = new Greeting();
 
console.log(greeting instanceof Greeting); // true
// greeting (🕵️‍ 从这里开始)
//   .__proto__ → Greeting.prototype (✅ 找到了！)
//     .__proto__ → React.Component.prototype 
//       .__proto__ → Object.prototype
 
console.log(greeting instanceof React.Component); // true
// greeting (🕵️‍ 从这里开始)
//   .__proto__ → Greeting.prototype
//     .__proto__ → React.Component.prototype (✅ 找到了！)
//       .__proto__ → Object.prototype
 
console.log(greeting instanceof Object); // true
// greeting (🕵️‍ 从这里开始)
//   .__proto__ → Greeting.prototype
//     .__proto__ → React.Component.prototype
//       .__proto__ → Object.prototype (✅ 找到了！)
 
console.log(greeting instanceof Banana); // false
// greeting (🕵️‍ 从这里开始)
//   .__proto__ → Greeting.prototype
//     .__proto__ → React.Component.prototype 
//       .__proto__ → Object.prototype (🙅‍ 没找到！)

console.log(Greeting.prototype instanceof React.Component);
// greeting
//   .__proto__ → Greeting.prototype (🕵️‍ 从这里开始)
//     .__proto__ → React.Component.prototype (✅ 找到了！)
//       .__proto__ → Object.prototype

// React 内部
class Component {}
Component.isReactClass = {};
 
// 我们可以这样检查
class Greeting extends Component {}
console.log(Greeting.isReactClass); // ✅ 是

// React 内部
class Component {}
Component.prototype.isReactComponent = {};
 
// 我们可以这样检查
class Greeting extends Component {}
console.log(Greeting.prototype.isReactComponent); // ✅ 是