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

Question

好的，所以我是React的新手，关于事件处理程序的一件事确实让我非常困扰：我似乎无法获得关于如何将参数传递给他们的直接答案。到目前为止，我已经看到了两种方法：

绑定

props.squareClick.bind(this, argument)

排队

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

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

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

因此，我将包含一个代码示例。它取自我为练习React而制作的一个Tic-Tac-Toe应用程序。它是板上单个Square的功能组件。该组件可用于所有正方形，并且会将一个键作为道具传递（即TOP_LEFT）以指示它是哪个正方形。还有一个单击处理程序，当单击Square时，会将事件发送回父组件。为了使单击处理程序知道单击了哪个Square，该key属性作为参数传递。

请查看此代码，并给我反馈。这是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

我通常使用的是数据集：

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;

Answer 2

对于您的示例，可以使用：

import React from 'react';

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

export default Square;

使用这种方法，仅使用函数的引用，函数本身不会每次都重新创建。但是，对于某些情况，人们无法使用类似的方法并寻求其他解决方案。这里有很多这样的问题：

如何将变量传递给函数引用？