React.js和ES6：任何不綁定構造函數中的函數的原因

Question

我正在將React組件更新到ES6並遇到此問題中描述的問題 - 無法在事件處理程序中訪問React實例（this） - 即不綁定到組件實例。

這是有道理的，當然也有效，但我對答案的另一部分感到困惑：

請注意，綁定函數會創建一個新函數。 您可以直接在render中綁定它，這意味着每次組件渲染時都會創建一個新函數，或者在構造函數中綁定它，這只會觸發一次。

 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原子。

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()方法，也將使用使用不同綁定上下文創建的相同函數。

是的，理想情況下你應該在構造函數中綁定。 讓我想起了幾周前我經歷的一段代碼 （檢查構造函數）。

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/

如果您想要綁定許多功能，這可能是一個更好的解決方案。 但是，您確實失去了僅使用標准函數聲明的清晰度。