Question

我是React的新手，我被告知在将方法传递给onClick处理程序时，你不应该：

使用内联箭头功能
调用.bind（this，parameter）

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

在我的代码中，我有一个父组件发送一个方法（asideSelected（））作为子组件的prop。在子组件中，我想用我父组件接收的参数调用此方法。我创建了以下解决方案：

父：

     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内部绑定也是如此，我从未见过＆＃34;坏＆＃34;重新渲染，所以我不知道这是否与其他方式有任何不同。如果不清楚我正在尝试做什么，我使用事件目标作为参数传递而不是直接在onClick内部进行传递。我担心这是一个笨重或低于标准的解决方案。

欢迎任何输入，谢谢

Answer 1

渲染由setState（）触发。

每次更新状态：this.setState（）时，组件及其子组件将重新呈现，you may read the doc here

Answer 2

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

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

关于箭头函数，这只是ES6语法，可以自动将代码编码为this，而无需使用.bind(this)。这只是语法上的ES6魔术，理论上不应该有任何性能损失，并使你的代码看起来更好。

Answer 3

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

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

Reactjs：在onClick方法中传递参数而不会丢失性能

3 个答案: