javascript - React.js 和 ES6 : Any reason not to bind a function in the constructor

Question

我正在将 React 组件更新为 ES6，遇到了这个问题中描述的问题 - Unable to access React instance (this) inside event handler - 即不绑定(bind)到组件实例。

这是有道理的，当然也行得通，但我对答案的另一部分感到困惑:

Be aware that binding a function creates a new function. You caneither bind it directly in render, which means a new function will becreated every time the component renders, or bind it in yourconstructor, which will only fire once.

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

vs

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

我假设构造函数中的绑定(bind)是性能等方面的首选方法，但您知道他们怎么说假设!

这两种方法的取舍是什么？有没有一种情况肯定比另一种好？还是无所谓？

Answer 1

在构造函数中绑定(bind)的缺点:React 热加载器将无法工作。

在 render() 中绑定(bind)的缺点:性能。

---

最近我一直在做这个。它比渲染中的绑定(bind)稍微快一些，但我愿意用性能换取灵 active 和我梦寐以求的 HMR。

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

例如，它提供了更多的灵 active ，并且更容易过渡到规范的输入原子。

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