Question

我试图理解我们何时在反应的jsx中使用类似的东西

something = {this._onRefresh}
something = {() => this._onRefresh}
something = {this._onRefresh()}

我们可能会将something传递给

子组件
onChange事件
onClick事件
您可以考虑的其他情况

我们的._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将函数分配给something

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

第1点和第2点正在为属性分配一个函数，例如具有onClick属性的函数，该函数接受单击时调用的回调。

第一点和第二点之间的区别在于，如果将代码放在render方法中，则第二点会为每个渲染创建一个函数，这并不是最佳性能。

使用第一点，您应该注意如何在方法内部定义用于引用this的方法。

如果您将类方法定义为：

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

然后，如果要访问方法内的this，则需要在构造函数内绑定this：

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

如果将方法定义为箭头函数，它将this的值保留在方法内部，因此不需要绑定：

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

Answer 2

1-您正在将函数作为属性传递给此组件

2-您正在创建一个新函数并将其作为属性传递给此组件

3-您要将调用_onRefresh的结果（输出）作为属性传递给此组件

Answer 3

如果_onRefresh是应通过prop传递的实际回调函数，则

选项1 有效：

_onRefresh = () => console.log('refresh');

...

<Component onRefresh={this._onRefresh}/>

Component使用onRefresh的地方，例如：

// do refresh
props.onRefresh();

如果_onRefresh是实际的回调函数，并且组件期望onRefresh属性是高阶函数，则

选项2 有效接受回调：

_onRefresh = () => () => console.log('refresh');

...

<Component onRefresh={() => this._onRefresh}/>

Component处理onRefresh的地方：

// do refresh
const refreshFn = props.onRefresh();
refreshFn();

如果_onRefresh是返回另一个函数的高阶函数，则

选项3 有效，并且接受回调的组件将期望使用此函数：< / p>

_onRefresh = () => () => console.log('refresh');

...

<Component onRefresh={this._onRefresh()}/>

Component处理onRefresh的地方：

// do refresh
const refreshFn = props.onRefresh();
refreshFn();

选项2和3中的场景的可能性要小得多，因为在此特定情况下，它们在React中用处不大。

在这种情况下，选项1可能是正确的，因为_onRefresh不会返回另一个函数，子组件也不希望该函数。选项2是一个错误，将导致永不调用_onRefresh。选项3是一个错误，将导致_onRefresh立即被调用，而undefined is not a function之后又发生错误，甚至更糟糕的是，没有错误的错误行为。

在jsx中使用（）=> vs this.something

3 个答案: