的值this主要取决于函数的调用方式。鉴于d.speak();,this将引用，d因为该函数被称为“对象方法”。

但是在<div>{this.renderElements}</div>您没有调用该函数时。您正在将函数传递给 React，它将以某种方式调用它。当它被调用时，React 不知道该函数“属于”哪个对象，因此它无法为this. 绑定解决了

其实我觉得你真正想要的是

<div>{this.renderElements()}</div>
//         call function ^^

即调用函数作为对象方法。那么你不必绑定它。

查看MDN以了解更多关于this.

组件中的事件处理程序不会像其他方法（生命周期方法...）一样自动绑定到组件实例。

class MyComponent extends React.Component {
   render(){
      return (
         <div onClick={this.renderElements}>
             {this.renderElements()} <-- `this` is still in side the MyComponent context
         </div>
      )
   }
}
//under the hood

var instance = new MyComponent();
var element = instance.render();
//click on div
element.onClick() <-- `this` inside renderElements refers to the window object now

查看此示例以了解this更多信息：

class Animal { 
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(this.name + ' makes a noise.');
    }  
}

class Dog extends Animal {
    run(){
       console.log(this.name + ' runs');
    }
    speak() {
        console.log(this.name + ' barks.');
        this.run(); <-- `this` is still in the Dog context
        return {onRun : this.run};
    }
}

var d = new Dog('Mitzie');
var myDog = d.speak();
myDog.onRun() <-- `this` is now in the global context which is the `window` object

您可以查看这篇文章以获取更多信息。

ES6 类中的函数- @Felix Kling 很好地解释了这种情况。每次在对象上调用函数时，都this指向该对象。

React.Component 中的生命周期方法- 每当 React 实例化您的组件时，就像myComponent = new MyComponent()它知道调用生命周期方法的对象一样，即myComponent。所以在生命周期方法中myComponent.componentDidUpdate()可以this使用一个简单的调用componentDidUpdate。其他生命周期方法相同。

React.Component 中的处理程序和绑定- this.stateis undefined，因为this实际上是window- 记录它并查看。原因是React 在全局上下文中调用处理程序，除非您将处理程序绑定到另一个覆盖的上下文 window（另请参阅 @Phi Nguyen 的回答）。我认为他们这样做是为了让你有更大的灵活性，因为在复杂的应用程序中，你的处理程序可能来自另一个通过 props 传递的组件，然后你想有可能说：“嘿，React -this不是我的组件，但它是家长。”

React 的文档在说的时候是误导性的

方法遵循与常规 ES6 类相同的语义，这意味着它们不会自动将 this 绑定到实例。

他们的意思是

var dog = new Dog('Mitzie');
speak = d.speak;

dog.speak() // this will be dog, because the function is called on dog
speak() // this will be window, and not dog, because the function is not bound

1. 箭头函数：

与函数表达式相比，箭头函数表达式的语法更短，并且在词法上绑定了 this 值( does not bind its own this, arguments, super, or new.target)。箭头函数总是anonymous. 这些函数表达式最适合非方法函数，它们不能用作构造函数。

Function.prototype.bind():

的绑定（）方法创建一个新的功能，调用它时，具有其将此关键字设置为所提供的值，与前述的当新功能被调用任何设置参数给定的序列。

2.组件规格和生命周期

要绝对明确：大部分生命周期的方法是使用点符号（真不约束，但在一个实例调用componentWillMount，componentWillUnmount，componentWillReceiveProps等...），但componentDidMount它因为它被排队到事务绑定到实例。

只要始终将autoBind(this);代码放在构造函数中，而不必担心方法指针。

npm install --save auto-bind-inheritance

const autoBind = require('auto-bind-inheritance');

class Animal {
  constructor(name) {
    autoBind(this);
    this.name = name;
  }

  printName() { console.log(this.name); }
  ...
}

let m = new Animal('dog');
let mpntr = m.printName;
m.printName() //> 'dog'
mpntr()       //> 'dog', because auto-bind, binds 'this' to the method.