JSX道具不应该使用.bind（）-如何避免使用bind？

Question

我有一个容器，需要更改显示表单或显示成功页面的UI表单。

容器具有state.showSuccess，我需要MyFormModule才能调用容器以更改状态。

下面的代码有效，但出现以下警告：

“ JSX道具不应该使用.bind（）”

不使用.bind（）怎么办？

    ...
    const myPage = class extends React.Component {
      state = { showSuccess: false };
      showSuccess() {
       this.setState({
          showSuccess: true,
        });
      }
      render() {
        const { showSuccess } = this.state;
        if (showSuccess) {...}
        ....
        <MyFormModule showSuccess={this.showSuccess.bind(this)} />

Answer 1

您应该首先了解 为什么 这是一个不好的做法。

这里的主要原因.bind是返回一个新的函数引用。
每次render通话都会发生这种情况，这可能会导致性能下降。

您有2个选择：

1. 将构造函数用于bind您的处理程序（这只会运行 一次 ）。

        constructor(props) {
      super(props);
      this.showSuccess = this.showSuccess.bind(this);
    }

1. 或使用箭头函数创建处理程序，以便它们将使用的词法上下文this，因此您完全不需要bind它们（您需要babel插件）：

        showSuccess = () => {
      this.setState({
        showSuccess: true,
      });
    }

你应该 不 使用这种模式（如其他建议）：

showSuccess={() => this.showSuccess()}

因为这也会在每个渲染器上创建一个新函数。
因此，您可以绕过该警告，但仍在以不良做法设计编写代码。

从ESLint文档：

JSX
prop中的绑定调用或箭头函数将在每个渲染器上创建一个全新的函数。这对性能不利，因为这将导致以不必要的方式调用垃圾回收器。如果将全新功能作为道具传递给使用该道具上的引用相等性检查来确定是否应更新的组件，则这也可能导致不必要的重新渲染。