Javascript 解释了React方法绑定

希望这能帮助新手理解react中方法绑定的目的。这里有一个很好的解释[here][1]和[here][2]，但这将更接近问题的重点和症结所在。

考虑一下这门课：

class Pizza extends Component {
    constructor(props);
    super(props);
    this.state = { text: 'hello world' };


    hi () {
      console.log(this.state.text);    
    }

    render() {
       return (
         <div>
           <button onClick={this.test}>
             Click me
           </button>
         </div>
       );
    }
}

这是因为该方法没有“绑定”到类的上下文。换句话说，该方法不与类Pizza关联，这与java等其他编程语言不同，java在对象中定义方法时，会自动指向该对象的实例

如所提供的链接中所述，解决此问题的一种方法是：

test = () => {
    console.log(this.state.text);
  };

你会看到：

Uncaught TypeError: Cannot read property 'state' of null

hello world

现在，该方法被绑定到Pizza类的上下文。简单地说，测试方法需要打印pizza类中的变量“state.text”，因此我们需要将该方法“绑定”到该pizza对象

---

希望这有帮助

我会避免在类中使用箭头函数，因为它们不会出现在原型中，因此当您实例化多个组件时，它们会得到自己的函数，而不是继承它们。而是绑定构造函数中的函数。jsperf测试表明，绑定函数比使用箭头函数快10-15%。我很感谢您的帮助，但正如您所提到的，还有更详细的答案。问题是，方法绑定到类，但一旦将方法引用传递给处理程序（如onClick）或任何需要回调的函数，就会丢失该上下文。当您将this.test传递给onClick时，this就在那里，提供了上下文。但是一旦它进入事件处理程序，它就不再有了，它只是被参数引用而没有this。还要记住，箭头函数的行为与普通函数表达式稍有不同，这里有更多信息：FWIW arrow方法不绑定任何东西。箭头函数不绑定参数或此参数。碰巧的是，它在一个arrow函数的周围范围中获取this的值。由于周围的类“this”引用实例，所以arrow函数属性可以工作。另请注意，类属性仍在ECMAScript的暂存过程中。@Li357感谢您的解释！现在还不清楚你想通过这篇文章达到什么目的。首先，看起来你想问一个问题并自我回答，但实际上你并没有在这里问一个问题。第二，你试图讨论的概念已经包含在其他问题中，你的回答在对主题的描述上有缺陷。总而言之，这不是很有用。