Reactjs：在onClick方法中传递参数而不会造成性能损失[重复]答案

【问题标题】：Reactjs: Passing parameter in onClick method without performance loss [duplicate]Reactjs：在onClick方法中传递参数而不会造成性能损失[重复]
【发布时间】：2018-07-06 17:58:12
【问题描述】：

我是 React 新手，有人告诉我，在将方法传递给 onClick 处理程序时，您不应该：

使用内联箭头函数
调用.bind(this, parameter)

因为它们都会在每次渲染上创建一个新函数，这会产生影响或性能

在我的代码中，我有一个父组件将一个方法 (asideSelected()) 作为道具发送给子组件。在子组件中，我想使用父组件接收的参数调用此方法。我创建了以下解决方案：

家长：

     export default class App extends Component {
         constructor(props) {
          super(props);
          this.state = {
           selected: ""
         };
         this.asideSelected = this.asideSelected.bind(this);
        }

     asideSelected(selected) {
       this.setState({
       selected: selected
    });
  }
    render() {
        return (
              <Aside
                selected={this.asideSelected}
              />
        );
      }

孩子：

export default class Aside extends Component {
  constructor(props) {
        super(props);
        this.selected = this.props.selected.bind(this);
        this.showSelected = this.showSelected.bind(this);
      }

      showSelected(e) {
        let selected = e.target.className;
        this.selected(selected);

      }
      <div className="profile" onClick={this.showSelected} src={chat}></div>
   }

这个解决方案似乎有效，但是，在 onClick 内部使用内联箭头函数和绑定也是如此，我从未见过“糟糕”的重新渲染，所以我不知道这是否真的与其他方法。如果不清楚我要做什么，我将使用事件目标作为参数传递，而不是直接在 onClick 内部进行。我担心这是一个笨重或低于标准的解决方案。

欢迎任何输入，谢谢

【问题讨论】：

就是这样，谢谢。

标签： javascript reactjs function onclick render

【解决方案1】：

渲染由 setState() 触发。

任何时候你更新状态：this.setState()，组件和它的子组件都会重新渲染，you may read the doc here

【讨论】：

感谢您的回复。我用词很糟糕。是的，我得到的重新渲染是想要的结果，我担心调用 .bind() 或在 JSX 道具中使用箭头函数会导致性能损失，这显然会导致不必要的垃圾收集。我想知道这是否可以绕过如上所示。

【解决方案2】：

绑定到 react 类的构造函数中的函数是不寻常且不必要的。当您在反应对象中添加新函数时，例如上面示例中的asideSelected(){ ... }，此函数将绑定到反应对象的原型。

通过在构造函数中添加this.asideSelected = this.asideSelected.bind(this);，您可以直接为对象创建asideSelected 的新实例。通过这样做，您可以添加 2 倍相同的功能。

关于箭头函数，这只是 ES6 语法，它可以自动将您的代码范围限定为 this，而无需使用 .bind(this)。这只是语法上的 ES6 魔法，理论上应该不会对性能造成任何影响，并使您的代码看起来更好。

【讨论】：

【解决方案3】：

绑定应该在构造函数中完成，原因在下面的链接中给出。我不是在这里写所有的博客，因为它有点长。让我知道，如果你不明白，那么我会尽力给出更多的解释。

链接：https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

【讨论】：