Question

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

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

请注意，绑定函数会创建一个新函数。您可以   要么直接在渲染中绑定它，这意味着新的功能将是   每次组件渲染时创建，或在组件中绑定它   构造函数，只会触发一次。
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 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。

e.g。

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/

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

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

3 个答案: