Question

我从反应开始，我做的第一件事是去主页，我看到一些例子，例如：

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Type some *markdown* here!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    const md = new Remarkable();
    return { __html: md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

ReactDOM.render(<MarkdownEditor />, mountNode);

... 我看到在构造函数中完成了：

this.handleChange = this.handleChange.bind(this);

背后的原因是什么？与同事交谈时，他们会想到一些可能的原因，比如render（）方法背后的特殊内容，或与ES6不支持的功能相关的东西。

有人对此有具体的解释吗？

初看起来，对我来说似乎没有必要，如这个简单的例子所示：

class A {
  constructor(){
      this.a = 1;
  }
  do(){
      console.log('A', this.a);  
 }
}

class B extends A {
  constructor(){
    super();
    this.a = 2;
  }


 do(){
      console.log('B', this.a);
  }
}
console.log ((new B()).do())

Answer 1

在React渲染方法中你需要绑定函数..

import React from 'react';

export default class App React.component {
  
   constructor(){
     super();
     
  //simple binding
  this.handleSomthing2 = this.handleSomthing2.bind(this);
   
   //binding somthing with different name
  this.handleSomthing4 = this.handle.bind(this);
    
   }
handleSomthing() {
 //code here
}

handleSomthing2(){
 //code here
}



//using arrow function
handleSomthing3=()=>{// code here}

handleSomthing4(){
 //code here
}
   
 render() {
 
 return (
  <div>
   {handleSomthing()} //cannot be access without binding.
   {this. handleSomthing()} //cannot be access without binding.
  
   {this.handleSomthing2} //bind with the function above and can be access.
   
   {this.handleSomthing3} //using arrow function bind the above function.
   
   {this.handle} // this bind the function handleSomthing4
   
  </div>
 
 );
  
 } 
 
 }

Answer 2

this.handleChange.bind（this）返回一个新函数，其中对此的引用将引用实际上下文（您的React组件）。

例如，当您不绑定this并将方法传递给子组件时。 this将引用该子组件而不是父组件。我们通常不想这样做。这就是我们绑定它的原因。

请注意，箭头函数不需要，因为they capture this value of the enclosing context。

Answer 3

JSX onChange={this.handleChange}上的此代码等同于dom.addEventListener('click', this.handleChange)。

班级函数this.handleChange相当于A.prototype.handleChange。这意味着A的原型不是A的实例。

因此，您需要将this绑定到A实例范围内的handleChange。

this默认依赖于接收者的范围。见这个例子：

class A {
  f() {
    console.log(this);
  }
  getF() {
    return this.f;
  }
}

const a = new A();
a.f(); // A{}

const f = a.getF();
f(); // undefined

在React中，生命周期事件（如componentWillMount）被称为特定实例instance.componentWillMount()的函数。

从反应示例开始，在构造函数this.method = this.method.bind（this）中，为什么？

3 个答案: