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

Posted 2023-02-21

【中文标题】Reactjs：在onClick方法中传递参数而不会造成性能损失[重复]

【英文标题】：Reactjs: Passing parameter in onClick method without performance loss [duplicate]

【发布时间】：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 内部进行。我担心这是一个笨重或低于标准的解决方案。

欢迎任何输入， 谢谢

【问题讨论】：

就是这样，谢谢。

【参考方案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