react/prefer-function-component Restriction
它的作用
强制 React 组件以函数组件的形式编写， 而不是类组件。
为什么这不好？
函数组件更简单、更易读，并且支持 React hooks。类组件是一种遗留模式，在现代 React 中 不被鼓励使用。
此规则基于以下规则： eslint-plugin-react-prefer-function-component。
示例
以下是此规则的错误代码示例：
jsx
class Foo extends React.Component {
render() {
return <div>{this.props.foo}</div>;
}
}
class Bar extends React.PureComponent {
render() {
return <div>{this.props.bar}</div>;
}
}以下是此规则的正确代码示例：
jsx
const Foo = function (props) {
return <div>{props.foo}</div>;
};
const Bar = ({ bar }) => <div>{bar}</div>;配置
此规则接受一个包含以下属性的配置对象：
allowErrorBoundary
type: boolean
default: true
如果为 true，则允许错误边界类（实现了 componentDidCatch 或 static getDerivedStateFromError）作为类组件使用。
这是因为这些类并不容易转换为函数组件， 因此默认情况下会将其从此规则中排除。
allowJsxUtilityClass
type: boolean
default: false
如果为 true，则允许包含 JSX 但不扩展 Component 或 PureComponent 的类。
如何使用
To enable this rule using the config file or in the CLI, you can use:
json
{
"plugins": ["react"],
"rules": {
"react/prefer-function-component": "error"
}
}ts
import { defineConfig } from "oxlint";
export default defineConfig({
plugins: ["react"],
rules: {
"react/prefer-function-component": "error",
},
});bash
oxlint --deny react/prefer-function-component --react-plugin版本
此规则于 v1.59.0 中新增。