← Back to rules

react/state-in-constructor 风格

它的作用

强制状态初始化方式要么在构造函数中，要么通过类属性进行。

该规则对函数组件不适用，因此在现代 React 代码库中可能可以禁用。

为什么这是个问题？

不一致的状态初始化风格会使代码库更难维护和理解。 此规则强制在 React 类组件中采用一致的模式。

示例

默认情况下，使用 "always" 模式时，以下为 错误 的代码示例：

class Foo extends React.Component {
  state = { bar: 0 };
  render() {
    return <div>Foo</div>;
  }
}

默认情况下，使用 "always" 模式时，以下为 正确 的代码示例：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: 0 };
  }
  render() {
    return <div>Foo</div>;
  }
}

"never" 模式

将强制状态初始化通过类属性完成。

使用 "never" 模式时，以下为 错误 的代码示例：

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { bar: 0 };
  }
  render() {
    return <div>Foo</div>;
  }
}

使用 "never" 模式时，以下为 正确 的代码示例：

class Foo extends React.Component {
  state = { bar: 0 };
  render() {
    return <div>Foo</div>;
  }
}

配置

此规则接受以下字符串值之一：

"always"

强制在构造函数中进行状态初始化。 这是默认模式。

"never"

强制通过类属性进行状态初始化。

如何使用

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

配置文件 (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/state-in-constructor": "error"
  }
}

CLI

oxlint --deny react/state-in-constructor --react-plugin

参考资料

• 规则源码