React 组件，使用函数而不是内联块事件处理程序会更好吗？答案

【问题标题】：React components, is it better to use functions instead inline block event handlers?React 组件，使用函数而不是内联块事件处理程序会更好吗？
【发布时间】：2016-06-11 20:14:34
【问题描述】：

我是新手，不知道render() 在内部是如何工作的。在 React 组件中，哪一个更高效，也是事件处理的最佳实践？

onNameChange (event) {
  this.setState({ name: event.target.value });
}

render() {
  return (
    <TextField
      value={ this.state.name }
      onChange={ this.onNameChange.bind(this) }
    />
  );
}

或

render() {
  return (
    <TextField
      value={ this.state.name }
      onChange={ (event) => this.setState({ name: event.target.value }) }
    />
  );
}

如果我们想做的不仅仅是用名称设置状态，情况会怎样？例如假设我们想要拆分 first 和 last 名称然后设置状态：

render() {
  return (
    <TextField
      value={ `${ this.state.name.first } ${ this.state.name.last }` }
      onChange={ (event) => {
        let parts = event.target.value.split(' ');
        this.setState({ name: { first: parts[0], last: parts[1] }}); 
      }}
    />
  );
}

【问题讨论】：

通过调用.bind() 或使用箭头函数表达式创建新函数并没有真正的区别。
对于第二个示例，渲染路径中的绑定调用会在每个渲染上创建一个全新的函数。
谢谢，有没有其他方法可以避免在每次渲染时重新声明处理程序？
Calling setState in render is not avoidable的可能重复

标签： javascript reactjs ecmascript-6

【解决方案1】：

做到这一点的最好方法可能是在构造函数中绑定事件处理程序，而不是在每次渲染中绑定或使用新的箭头函数，至少从性能的角度来看

constructor() {
  super();
  this.onNameChange = this.onNameChange.bind(this);
}

onNameChange (event) {
 this.setState({ name: event.target.value });
}

render() {
 return (
   <TextField
    value={ this.state.name }
    onChange={ this.onNameChange }
   />
 );
}

【讨论】：