Reactjs React/JSX方法定义的优缺点

我想了解以下两者之间的真正区别：

<MyComponent myProp = { ()=> this.myMethod } 
// and
<MyComponent myProp = { this.myMethod }

<MyComponent myProp = { () => this.myMethod } 
// and
<MyComponent myProp = { this.myMethod }

以下两种方法定义方法的优点是什么：

myMethod = (event) => {}
// and  
myMethod(event){}

myMethod = (event) => {}
// and  
myMethod(event){}

---

首先，arrow函数

（）=>{stuff}

和常规函数声明

function（）{stuff}

之间的区别在于，arrow函数自动将自己绑定到声明它的任何对象。这在JSX中非常有用。例如，假设您有一个保存自己状态的表单，然后您有一个需要更改该状态的单独输入组件。如果您创建了一个像这样的onChange方法

handleChange（e）{change this.state}

，然后将其传递给输入，那么输入将更改自己的状态，因为它现在是该方法的所有者。因此，这就是为什么需要声明

this.handleChange.bind（this）

（通常在构造函数中）。但是，如果您像这样声明方法

handleChange=e=>{change this.state}

，那么它已经绑定到创建者（本例中的表单），您不需要手动绑定它

至于

myProp={this.myMethod}

和

myProp={（）=>this.myMethod（）}

之间的区别，我不能完全确定。当我将道具声明为箭头函数时，我通常会尝试传递一个额外的参数。这是因为您无法执行此

myProp={This.myMethod（extraValue）}

，因为javascript认为您正在尝试立即调用该方法。因此，在本例中，我将像这样设置prop

myProp={e=>this.myMethod（e，extraValue）}

，以便在触发之前不会调用该方法。但如果你不想传递额外的参数，我不知道你为什么会这样声明

至于在没有参数的情况下调用bind方法，我从未见过这种情况，也不知道它会做什么。可能它默认为

this

，但这不是一个好的做法，因为您希望明确说明您试图绑定到方法/函数的内容。据我所知，bind方法至少需要一个参数

---

希望这有帮助。我知道这不是一个很好的答案，但我希望它能给你一些关于发生了什么的见解。

首先，箭头函数

（）=>{stuff}

和常规函数声明

function（）{stuff}

之间的区别在于，箭头函数会自动将自己绑定到声明它的任何对象。这在JSX中非常有用。例如，假设您有一个保存自己状态的表单，然后您有一个需要更改该状态的单独输入组件。如果您创建了一个像这样的onChange方法

handleChange（e）{change this.state}

，然后将其传递给输入，那么输入将更改自己的状态，因为它现在是该方法的所有者。因此，这就是为什么需要声明

this.handleChange.bind（this）

（通常在构造函数中）。但是，如果您像这样声明方法

handleChange=e=>{change this.state}

，那么它已经绑定到创建者（本例中的表单），您不需要手动绑定它

至于

myProp={this.myMethod}

和

myProp={（）=>this.myMethod（）}

之间的区别，我不能完全确定。当我将道具声明为箭头函数时，我通常会尝试传递一个额外的参数。这是因为您无法执行此

myProp={This.myMethod（extraValue）}

，因为javascript认为您正在尝试立即调用该方法。因此，在本例中，我将像这样设置prop

myProp={e=>this.myMethod（e，extraValue）}

，以便在触发之前不会调用该方法。但如果你不想传递额外的参数，我不知道你为什么会这样声明

至于在没有参数的情况下调用bind方法，我从未见过这种情况，也不知道它会做什么。可能它默认为

this

，但这不是一个好的做法，因为您希望明确说明您试图绑定到方法/函数的内容。据我所知，bind方法至少需要一个参数

---

希望这有帮助。我知道这不是一个很好的答案，但我希望它能让你对正在发生的事情有所了解。

我将尝试检查你的每一个困惑点，并试图澄清

this.myMethod}/>

在本例中，您将向组件传递一个匿名箭头函数，当调用此箭头函数时，它将尝试调用您的方法。我之所以说“尝试”，是因为您实际上没有调用这个.myMethod，您可以通过缺少的参数看到它。这与下面的代码相同

function somOtherFunc() {
  console.log("I will not run");
}

function myFunction() {
  somOtherFunc;
}

myFunction();

---

然而，在这种情况下，我将尝试检查您的每一个混淆点，并试图澄清

this.myMethod}/>

在本例中，您将向组件传递一个匿名箭头函数，当调用此箭头函数时，它将尝试调用您的方法。我之所以说“尝试”，是因为您实际上没有调用这个.myMethod，您可以通过缺少的参数看到它。这与下面的代码相同

function somOtherFunc() {
  console.log("I will not run");
}

function myFunction() {
  somOtherFunc;
}

myFunction();

---

然而，在这种情况下，我想了解以下两者之间的真正区别：

<MyComponent myProp = { ()=> this.myMethod } 
// and
<MyComponent myProp = { this.myMethod }

<MyComponent myProp = { () => this.myMethod } 
// and
<MyComponent myProp = { this.myMethod }

答：我想不出什么时候使用这两种语法中的任何一种都合适。这种格式将导致每次呈现jsx时（很多次）都运行该方法

问：为什么有时调用

bind（）

函数时不使用

这个

参数，如下例所示：

<MyComponent myProp = { () => this.myMethod.bind () }  
// and 
<MyComponent myProp = { this.myMethod.bind(this) }

<MyComponent myProp = { () => this.myMethod.bind() }  
// and 
<MyComponent myProp = { this.myMethod.bind(this) }

答：第一个方法声明将方法绑定到它所属组件的范围。第二个方法没有，因此如果将其传递给子组件，它将采用子组件的作用域（

this

）

高度

myMethod = (event) => {}
// and  
myMethod(event){}

class MyComponent extends React.Component<> {
  // Here we define the method and bind it to this component's scope
  myMethod = () => {}

  render() {
    return (
      // Now add the method as a prop
      <MyComponent myProp = {this.myMethod}>
    );
  }
}