React.js和ES6:任何不绑定构造函数中的函数的原因

Question

我正在将React组件更新到ES6并遇到此问题中描述的问题 - 无法在事件处理程序中访问React实例(this) - 即不绑定到组件实例.

这是有道理的,当然也有效,但我对答案的另一部分感到困惑:

请注意,绑定函数会创建一个新函数.您可以直接在render中绑定它,这意味着每次组件渲染时都会创建一个新函数,或者在构造函数中绑定它,这只会触发一次.

constructor() {
  this.changeContent = this.changeContent.bind(this);
}

VS

render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

我假设构造函数中的绑定是性能等的首选方法,但你知道他们对假设的看法!

这两种方法的权衡取舍是什么？有没有一个人肯定比另一个好？或者没关系？

Answer 1

构造函数中绑定的缺点:反应热加载器将无法正常工作.

render()中绑定的缺点:性能.

最近我一直这样做.它比渲染中的绑定稍快,但我愿意将性能换成灵活性和我梦寐以求的HMR.

render(){
  return <input onChange={(e) => this.handleChange(e.target.value)}>;
}

例如,它提供了更多的灵活性,并且更容易过渡到规范的Input原子.

render(){
  return <input onChange={(x) => this.handleChange(x)}>;
}

或者在你想要的地方添加参数:

render(){
  return (
    <ul>
      {this.props.data.map((x, i) => {
        // contrived example
        return (
          <li 
            onMouseMove={(e) => this.handleMove(i, e.pageX, e.pageY)}>
          {x}
          </li>
        );
      }}
    </ul>
  );
}

Answer 2

我想你要理解的是Function.prototype.bind()将返回一个新功能.因此,每次通过在render()方法中执行绑定操作,您基本上都会进行创建.render()多次调用该方法的可能性非常高.

因此,在构造函数中执行此操作意味着您最终只能绑定一次,并且可以根据需要多次重复使用它.即使render()多次调用该方法,也将使用使用不同绑定上下文创建的相同函数.

是的,理想情况下你应该在构造函数中绑定.让我想起了几周前我经历的一段代码(检查构造函数).