我们什么时候应该在 React class 中定义一个函数作为箭头函数？

Question

我正在使用 React 创建网页。有一个 textarea 我们可以在其中输入文本。因此，在 return 中，onChange 链接到名为 inputChange:

的函数

<textarea value={this.state.text} onChange=...></textarea>

关于inputChange，一种方法是将其定义为方法（称为object method？）：

inputChange (event) {
  let value = event.target.value;
  this.setState((s) => ({ ...s, text: value }));
}

另一种方法是将其定义为箭头函数（称为class property？）：

inputChange = (event) => {
  let value = event.target.value;
  this.setState((s) => ({ ...s, text: value }));
}

（我注意到的一件事是，如果我们将 inputChange 定义为箭头函数，当我们打印 this 里面，例如 render.)

有谁知道哪种方式更好？一般来说，我们什么时候应该在 React class 中定义一个函数作为箭头函数？

Answer 1

您需要绑定 inputChange 函数才能接收正确的上下文并能够使用 this.setState

现在可以多种方式绑定

第一个：

inputChange = (event) => {
  let value = event.target.value;
  this.setState((s) => ({ ...s, text: value }));
}

其二：在构造函数中使用bind

constructor(props) {
   super(props);
   this.inputChange = this.inputChange.bind(this)
}

inputChange(event){
  let value = event.target.value;
  this.setState((s) => ({ ...s, text: value }));
}

第三种：内联绑定或箭头函数

inputChange (event) {
  let value = event.target.value;
  this.setState((s) => ({ ...s, text: value }));
}
...
<textarea value={this.state.text} onChange={this.inputChange.bind(this)}></textarea>

或

<textarea value={this.state.text} onChange={(e) => this.inputChange(e)}></textarea>

现在您必须注意，当您使用第三种方法内联绑定箭头函数时，会在每次渲染时创建一个新的函数引用，这会对性能产生非常轻微的影响。但是，如果您有很多这样的函数 returns，性能影响将会增加，这不仅仅是因为创建了更多函数和需要垃圾回收，还因为子组件优化（如果有的话）使用 PureComponent 或React.memo 将随着函数引用的更改而开始失败

您可以使用第一种或第二种方法中的任何一种进行绑定

Answer 2

箭头函数可以很好地解决组件中的 this 问题。更多时候，您会发现自己处于传递回调函数的情况。

现在，在这些情况下，不使用箭头函数可能会导致问题，因为每次调用回调函数时您都无法确定 this 的值。

所以更好的方法是改用箭头函数。它们在函数内部保留 this 关键字的值，因为它在函数外部。

这种方法解决了许多看不见的令人沮丧的错误，这些错误可能由于关键字 this

的不正确使用和值而出现

有关更详细的答案，请参阅 this 文章以使用代码片段进行解释。

我们什么时候应该在 React class 中定义一个函数作为箭头函数？

When should we define a function inside a React class as arrow function?

reactjs

arrow-functions