具有箭头函数处理程序的功能组件是否比具有绑定在构造函数中的处理程序的类组件的性能更好？

Question

我有一个带有箭头函数事件处理程序的功能组件，这被认为是不好的做法，因为每次渲染组件时都需要重新创建函数。

const SimpleQuestion = ({
  question,
  onChangeQuestionTitle
}) => {

  return (
    <div>
      <input
        type="text"
        placeholder="Enter Question"
        value={question.title}
        onChange={(e) => onChangeQuestionTitle({
          id: question.id,
          title: e.target.value
        })}
      />
    </div>
  );
};

我不能为它定义外部函数，因为它需要访问道具，我也看不出这个例子有什么好处：

const SimpleQuestion = ({
  question,
  onChangeQuestionTitle
}) => {

  const handleChangeQuestionTitle = (e) => {
    onChangeQuestionTitle({
      id: question.id,
      title: e.target.value
    });
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter Question"
        value={question.title}
        onChange={handleChangeQuestionTitle}
      />
    </div>
  );
};

为了消除对箭头函数的需要，我可以使用带有构造函数和 bind() 的类组件。例如：

class SimpleQuestion extends React.Component {
  constructor(...args) {
    super(...args)  
    this.onChangeQuestionTitle = this.onChangeQuestionTitle.bind(this);
  }

  render() {
    return (
      <div>
        <input
          type="text"
          placeholder="Enter Question"
          value={question.title}
          onChange={this.onChangeQuestionTitle}
        />
      </div>
    );
  }

  onChangeQuestionTitle(e) {
    this.props.onChangeQuestionTitle({
      id: question.id,
      title: e.target.value
    });
  }
}

我应该使用类组件还是带有箭头功能的函数组件？从性能角度来看，哪个更好？

PS：我知道我可以从 Question 组件中导出逻辑并在父容器中执行处理程序逻辑，但这个问题与性能主题有关。

谢谢

Answer 1

因为您只需要返回一些 jsx 而您不关心组件的状态或任何生命周期方法，因此最好的选择是 #2。

关于通过将函数的引用传递给render() 方法而不是函数本身的方法来创建不必要的匿名函数的问题将得到解决。

Answer 2

首选第二种或第三种方法。至于你应该选择哪个，我认为这是个人喜好。我个人更喜欢粗箭头语法（#2），因为您不必在构造函数中绑定。但无论哪种情况，您都可以通过将函数的引用（而不是函数定义）传递给 render() 来解决创建不必要的匿名函数的问题。