Question

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

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

是否适合使用：

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

为什么有时不使用bind()参数就调用this函数，例如以下示例：

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

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

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

Answer 1

我将尝试遍历您的每一个困惑点，并尝试澄清。

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

在这种情况下，您要将匿名箭头函数传递给组件，并且当该箭头函数被调用时，它将尝试调用您的方法。我说是尝试，因为您实际上并没有调用this.myMethod，您可以通过丢失的括号看到。这与以下代码相同。

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

function myFunction() {
  somOtherFunc;
}

myFunction();

在这种情况下，<MyComponent myProp = { this.myMethod }，this.myMethod实际上会被调用，因为作为prop传递的函数是实际函数。

<MyComponent myProp = { ()=> this.myMethod() }这种情况与您的第一种情况类似，不同之处在于该方法实际上可以工作，因为有相应的parens可以进行调用。这与以下代码相同。

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

function myFunction() {
  somOtherFunc();
}

myFunction();

对于使用bind而言，这实际上取决于是否需要在调用的方法中绑定this的上下文。我建议您通读this，以便对您更有意义。实话实说，如果您不需要绑定this关键字，那么实际上根本不需要使用bind方法，除非您想将参数传递给您的方法，但这也是无需使用bind就可以实现。考虑以下代码作为我的意思的示例。

clickhandler = (number) {
  console.log(number); //10
}

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

最后，对于最后一点，您可以使用诸如myMethod =(event)=>{}之类的箭头语法在JS中声明一个函数，也可以使用诸如function之类的myMethod(event){}关键字。两者之间的区别在于了解this在JS中的工作原理，为此，我强烈建议您阅读上面链接的文章。

Answer 2

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

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

A：第一个函数声明将方法绑定到其所在组件的作用域（this）。第二个声明不是必需的，而是依靠您在定义方法的地方进行操作（请参阅下面的定义方法问题中的更多内容）。

问：是否适合使用：

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

A：我想不出何时适合使用这两种语法中的任何一种。这种格式将导致每次渲染jsx时都会运行该方法（很多）！

问：为什么有时不使用bind()参数就调用this函数，例如以下示例：

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

A：我认为顶级语法无效。底部语法等效于使用lambda <MyComponent myProp = () => {}，因为它们都将函数的作用域绑定到包含此jsx的组件的作用域。

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

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

A：第一个方法声明将方法绑定到它所属的组件的范围。第二种方法不是，因此，如果将其传递给子组件，它将采用子组件的范围（this）。

高度赞赏：此示例显示了我的偏好设置：

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}>
    );
  }
}

Answer 3

首先，箭头函数() => { stuff }与常规函数声明function() { stuff }之间的区别在于，箭头函数会自动将自身绑定到声明的任何内容。这在JSX中非常有用。例如，假设您有一个拥有自己状态的表单，然后有一个单独的输入组件需要更改该状态。如果您创建了一个像handleChange(e) { change this.state }这样的onChange方法，然后将其传递给输入，则输入将更改其自己的状态，因为它现在是该方法的所有者。因此，这就是为什么您需要然后声明this.handleChange.bind(this)（通常在构造函数中）的原因。但是，如果您像这样handleChange = e => { change this.state }声明方法，则该方法已经绑定到创建者（在本例中为表单），则无需手动绑定它。

关于myProp = { this.myMethod }和myProp = { () => this.myMethod() }之间的区别，我不确定。当我将prop声明为箭头函数时，我通常会尝试传递一个额外的参数。这是因为您无法执行myProp = { this.myMethod(extraValue) }，因为javascript认为您正在尝试立即调用该方法。因此，在这种情况下，我将像myProp = { e => this.myMethod(e, extraValue) }这样设置prop，以便在触发该方法之前不会调用该方法。但是，当您不尝试传递额外的参数时，我不知道您为什么会这样声明它。

就不带参数调用bind方法而言，我从未见过，也不知道它会做什么。也许默认将其设置为this，但这不是一个好习惯，因为您可能希望明确说明要绑定到方法/函数的内容。据我了解，bind方法至少需要一个参数。

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

React / JSX方法定义的优缺点

3 个答案: