← Back to rules

react/no-redundant-should-component-update 风格

它做了什么

禁止在继承 React.PureComponent 时使用 shouldComponentUpdate。

请注意，使用 PureComponent 在现代 React 中 不被推荐。

为什么这是个问题？

React.PureComponent 会自动实现 shouldComponentUpdate，通过浅层比较属性和状态。 在继承 React.PureComponent 的类中定义 shouldComponentUpdate 是冗余的，且违背了使用 React.PureComponent 的初衷。 如果你需要自定义比较逻辑，请改用继承 React.Component。

示例

此规则的 错误 代码示例：

class Foo extends React.PureComponent {
  shouldComponentUpdate() {
    // 执行检查
  }

  render() {
    return <div>酷毙了！</div>;
  }
}

function Bar() {
  return class Baz extends React.PureComponent {
    shouldComponentUpdate() {
      // 执行检查
    }

    render() {
      return <div>棒极了！</div>;
    }
  };
}

此规则的 正确 代码示例：

class Foo extends React.Component {
  shouldComponentUpdate() {
    // 执行检查
  }

  render() {
    return <div>酷毙了！</div>;
  }
}

function Bar() {
  return class Baz extends React.Component {
    shouldComponentUpdate() {
      // 执行检查
    }

    render() {
      return <div>棒极了！</div>;
    }
  };
}

class Qux extends React.PureComponent {
  render() {
    return <div>太棒了！</div>;
  }
}

如何使用

要通过配置文件或 CLI 启用 此规则，可以使用：

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/no-redundant-should-component-update": "error"
  }
}

CLI

oxlint --deny react/no-redundant-should-component-update --react-plugin

参考资料

• 规则源码