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

Question

我正在将 React 组件更新为 ES6，遇到了这个问题中描述的问题 - - 即未绑定到组件实例。

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

Be aware that binding a function creates a new function. You can either bind it directly in render, which means a new function will be created every time the component renders, or bind it in your constructor, which will only fire once.
constructor() {
  this.changeContent = this.changeContent.bind(this);
}
vs
render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

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

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

Answer 1

我想您只需要了解 Function.prototype.bind() 将 return 一个新函数。因此，您基本上每次都会通过在 render() 方法中执行绑定操作来进行创建。 render() 方法被多次调用的几率非常高。

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

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

Answer 2

我认为您已经解决了与重新创建函数有关的主要问题。我想强调另一个使用箭头函数和属性初始值设定项的选项。这种情况下的箭头函数将自动采用局部 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/

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

Answer 3

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

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

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

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

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

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

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

React.js and ES6: Any reason not to bind a function in the constructor

javascript

this

reactjs