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

小编典典

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

reactjs

我正在将React组件更新到ES6的过程中，遇到了该问题中描述的问题-
无法在事件处理程序内部访问React实例（this） -即未绑定到组件实例。

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

请注意，绑定功能会创建一个新功能。您可以将其直接绑定到render中，这意味着每次渲染该组件时都会创建一个新函数，或者将其绑定到构造函数中，后者只会触发一次。
constructor() {
  this.changeContent = this.changeContent.bind(this);
}
与
render() {
  return <input onChange={this.changeContent.bind(this)} />;
}

我假设在构造函数中进行绑定是性能等方面的首选方法，但是您知道他们说的前提！

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

阅读 233

2020-07-22

共1个答案

小编典典

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

在render（）中绑定的缺点：性能。

最近，我一直在这样做。它比在渲染中绑定要快一些，但是我愿意为了灵活性和我梦H以求的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>
  );
}

2020-07-22