javascript - 在 jsx 中使用 () => vs this.something

Question

我想知道我们什么时候在我们的 react 的 jsx 中使用类似的东西

1. something = {this._onRefresh}
2. something = {() => this._onRefresh}
3. something = {this._onRefresh()}

something 可能是我们传递给我们的东西

1. 子组件
2. onChange 事件
3. onClick 事件
4. 您能想到的任何其他情况

我们的 ._onRefresh() 可能在哪里

._onRefresh = () => {
  //changes state of our react component 
  //Call redux action
  //call other functions
}

或者在表单的情况下，它接受触发它的事件

  ._onRefresh = (event) => {
      //takes target value to search inside the data 
      //Store data in the backend
    }

谁能解释一下我们什么时候需要使用哪一个？将帮助我清除 react 和 javascript 的基础知识

Answer 1

1/2 点和 3 点实际上是完全不同的。

您的第 3 点执行一个函数并将返回值分配给 something。

您的示例 1/2 将函数分配给某物

情况 3 可以用于例如您具有 disable 属性，并且您想要分配函数的返回 true/false 的情况。

第 1 点和第 2 点是为属性分配一个函数，例如 onClick 属性，它接受点击时调用的回调。

第一点和第二点的区别在于，如果您将该代码放在 render 方法中，第二点会为每个渲染创建一个函数，这对于性能来说并不是最好的。

使用第一点，你应该注意如何在方法中定义引用this的方法。

如果您将类方法定义为:

myMethod() {
  console.log(this); // it will be undefined by default
}

然后如果你想在方法中访问this，你需要在构造函数中绑定(bind)this:

this.myMethod = this.myMethod.bind(this);

如果你将方法定义为箭头函数，它会在方法中保留 this 的值，所以不需要绑定(bind):

myMethod = () => {
  console.log(this);
};