Javascript React组件，使用函数而不是内联块事件处理程序是否更好？

我是新手，不知道

render（）

如何在内部工作。对于react组件中的事件处理，哪一个更有效且最佳实践

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

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

---

最好的方法可能是在构造函数中绑定事件处理程序，而不是在每个渲染中绑定或使用新的arrow函数，至少从perf的角度来看是这样

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

constructor（）{
超级（）；
this.onNameChange=this.onNameChange.bind（this）；
}
onNameChange（事件）{
this.setState（{name:event.target.value}）；
}
render（）{
返回(
);
}

无论是通过调用

.bind（）

还是使用箭头函数表达式来创建新函数，实际上都没有什么区别。在第二个示例中，渲染路径中的绑定调用会在每个渲染上创建一个全新的函数。谢谢，有没有其他方法可以避免在每次渲染时重新声明处理程序？可能的重复

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

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