React函数未显示在"this"中但仍可调用

Question

我很困惑React函数如何绑定到这个.

import React, { Component } from 'react';

class App extends Component {
  randomFunction(){
    console.log("Hello World")
  }

  render() {
    return (
      <div>
        {console.log(this)}
        {console.log(this.randomFunction)}
      </div>
    );
  }
}

export default App;

您应该在控制台上看到这些都返回了一些东西,但是randomFunction在前一个this对象中没有.如下图所示

我很想知道这个链接是如何/在哪里制作的？

Answer 1

那是因为你的功能被移动到了原型.这样,它只创建一次,而不是每个组件实例.

您可以通过调用console.log(this.__proto__)或展开__proto__屏幕截图中显示的对象来验证这一点.