React.js和ES6:没有在构造函数中绑定函数的任何理由

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

本文关键字：绑定 函数 理由 任何 构造函数 js ES6 React      更新时间：2023-09-26

我正在更新一个React组件到ES6的过程中，遇到了这个问题-无法访问React实例(这个)内部事件处理程序-即没有绑定到组件实例。

这很有意义，当然也有效，但我对答案的另一部分感到困惑:

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

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

和

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

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

这两种方法的权衡是什么?有没有一种情况是其中一种肯定比另一种好?还是无所谓?

在构造器中绑定的缺点:react热加载器无法工作。

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

我认为你所要理解的是Function.prototype.bind()将返回一个新函数。所以你基本上每次都会通过在render()方法中执行绑定动作来创建。render()方法被多次调用的可能性非常高。

所以在构造函数中这样做意味着你最终只绑定一次，你可以随心所欲地重复使用它。即使多次调用render()方法，也将使用用不同的绑定上下文创建的相同函数。

是的，理想情况下你应该在构造函数中绑定。这让我想起了几周前我读过的一段代码(检查构造函数)

我认为您已经解决了与重建函数有关的主要问题。我想强调使用箭头函数和属性初始化器的另一个选项。本例中的箭头函数将自动采用本地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/

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

相关文章：