javascript - React - 如何将参数传递给事件处理程序

Question

好的，所以我是 React 的新手，关于事件处理程序的一件事真的非常困扰我:我似乎无法得到关于如何将参数传递给它们的直接答案。到目前为止，我见过两种方法:

绑定(bind)

props.squareClick.bind(this, argument)

排队

onClick={() => props.squareClick(argument)}

我一直在阅读的重要内容是性能成本。因为内联函数或带有 Bind 的函数在重新渲染时会被视为全新的函数，所以会有额外的 GC 开销，而且对于类组件，它可以打破对带有 PureComponent 的 shouldComponentRender 的浅层检查。

然后有人说这是过度优化，我不应该担心它，只需使用内联函数即可。这很酷，但老实说，所有这些相互矛盾的信息都让我感到困惑。

所以，我将包含一个代码示例。它取自我为练习 React 而制作的井字游戏应用程序。它是板上单个 Square 的功能组件。这个组件被重新用于所有的方格，并且一个键作为 Prop (即TOP_LEFT)传入以指示它是哪个方格。还有一个单击处理程序，当单击 Square 时，会将一个事件发送回父组件。为了让单击处理程序知道单击了哪个 Square，该键属性作为参数传入。

请查看此代码并给我反馈。这是 React 中可接受的做法吗？它会不会对性能造成影响，并且这种性能影响会很大吗？最后，如果您的回答是我不应该这样做，请清楚地向我解释一个更好的做法。

import React from 'react';

const Square = props => {
    return (
        <div onClick={() => props.squareClick(props.key)}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;

Answer 1

我通常做的是使用datasets :

import React from 'react';

const Square = props => {
    return (
        <div
          data-key={props.key}
          onClick={props.squareClick}>
            <p>{props.value}</p>
        </div>
    );
};

export default Square;

然后在方法本身上，您只需将您的值取回为 e.target.dataset.key .

或者你也可以把它变成一个类组件:

import React from 'react';

class Square extends React.Component {
    handleClick = e => {
      this.props.squareClick(this.props.key)
    }

    render() {
      return (
          <div onClick={this.handleClick}>
              <p>{this.props.value}</p>
          </div>
      );
    }
};

export default Square;