时间戳

首页 > 解决方案 > 我应该在哪里绑定 React 组件中的方法？

javascript - 我应该在哪里绑定 React 组件中的方法？

问题描述

我现在学习 React 并注意到很多人将他们的方法绑定在构造函数中。

像这样： 

class MyComponent extends React.Component {
  constructor() {
    super();
    this.myMethod = this.myMethod.bind(this);
  }

  render() {
    <button onClick={this.myMethod}>Click me</button>
  }

  myMethod() {
    // do something
  }
}

但是我习惯了这样写： 

render() {
    <button onClick={this.myMethod.bind(this)}>Click me</button>
}

有几个人告诉我，使用第二种方法是一种糟糕的体验。

那么你能告诉我第一种方法和第二种方法之间的区别吗？有什么优点和缺点吗？还是性能问题？

标签： javascriptreactjsecmascript-6arrow-functions

解决方案

你是对的，别人告诉你的也是对的。

鼓励您在构造函数中进行绑定，因为每个组件只调用一次构造函数，因此如果您在构造函数中进行绑定，它只会在 Webpack bundle.js 文件中创建一个新对象/函数，因此影响不大

不鼓励您直接在渲染中进行绑定，因为组件渲染有多种原因，例如当您执行 setState 时，当您的组件接收新道具时，您的组件将渲染很多次。因此，由于您在组件渲染时直接在渲染中绑定，因此每次在 Webpack bundle.js 中都会创建一个新函数，并且您的捆绑文件大小会增加，并且当您的应用程序包含数千个组件并且如果您直接在其中进行绑定时，这会影响性能在每个组件中渲染。

所以建议你只在构造函数中做绑定。希望澄清

推荐阅读