React.js 和 ES6：任何不在构造函数中绑定函数的理由

Question

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

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

请注意，绑定函数会创建一个新函数。你可以 要么直接在渲染中绑定它，这意味着一个新函数将是 每次渲染组件时创建，或将其绑定到您的 构造函数，它只会触发一次。

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

对

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

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

这两种方法的权衡是什么？有没有一种情况肯定比另一个更好？还是没关系？

Answer 1

构造函数中绑定的缺点：react hot loader 不起作用。

render() 中绑定的缺点：性能。

---

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

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

它提供了更多的灵活性，例如，更容易过渡到规范的 Input atom。

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() 方法被多次调用，也会使用使用不同绑定上下文创建的同一个函数。

是的，理想情况下您应该在构造函数中绑定。让我想起了几周前的piece of code（检查构造函数）。

Answer 3

我认为您已经解决了与重新创建函数有关的主要问题。我想强调另一个使用箭头函数和属性初始化器的选项。这种情况下的箭头函数会自动采用本地的this。

例如

class MyClass extends React.Component {
  changeComponent = (e) => {
    // this will refer to the component
  }

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

您可以在此处阅读更多信息：http://babeljs.io/blog/2015/06/07/react-on-es6-plus/

当您有许多要绑定的功能时，这可能是一个更好的解决方案。但是，您确实失去了仅使用标准函数声明的简洁性。