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

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>
  );
};

我无法为其定义外部函数，因为它需要访问 props，而且我在这个示例中也看不到任何优点:

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
    });
  }
}

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

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

谢谢

Answer 1

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

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