React 组件结构

目的与范围

本文档详细介绍了根据 Airbnb JavaScript 风格指南，React 组件推荐的结构和组织模式。它涵盖了组件声明模式、生命周期方法排序、内部组件组织以及相关的最佳实践。有关 props、state 和事件处理的特定信息，请参阅 Props、State 和事件。

组件声明模式

Airbnb 的风格指南为 React 组件的声明方式定义了清晰的模式，并提供了何时使用每种模式的具体指导。

类组件与函数组件

首选的组件声明模式是

组件类型	何时使用	声明模式
类组件	当需要 state、refs 或生命周期方法时	`class Component extends React.Component`
函数组件	当组件无状态/展示性时	常规命名函数（非箭头函数）

关键规则

使用 ES6 类代替 React.createClass
对于没有 state/refs 的组件，优先使用无状态函数
避免在函数组件声明中使用箭头函数

来源：react/README.md34-74

组件文件组织

每个 React 组件都应放在自己的文件中，并遵循以下约定：

React 组件文件使用 .jsx 扩展名
组件文件名使用 PascalCase（例如 ReservationCard.jsx）
对于目录的根组件，使用 index.jsx 作为文件名，并使用目录名作为组件名

来源：react/README.md82-113

组件生命周期和方法排序

Airbnb 风格指南强制要求在 React 组件内对方法进行特定的排序，以确保一致性和可读性。

方法排序图

详细方法排序

ESLint 规则 react/sort-comp 强制在类组件中执行以下方法排序：

静态方法和属性
生命周期方法
- constructor
- getChildContext
- getDerivedStateFromProps
- componentWillMount / UNSAFE_componentWillMount
- componentDidMount
- componentWillReceiveProps / UNSAFE_componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate / UNSAFE_componentWillUpdate
- getSnapshotBeforeUpdate
- componentDidUpdate
- componentDidCatch
- componentWillUnmount
事件处理程序
- 以 handle* 开头的方法
- 以 on* 开头的方法
用于 render 的 getter 方法
可选的渲染方法（例如 renderNavigation）
主 render 方法

来源：packages/eslint-config-airbnb/rules/react.js247-297 react/README.md657-676

类组件结构模板

遵循 Airbnb 风格指南的结构良好的 React 类组件看起来是这样的：

PropTypes 和 DefaultProps

对于类组件，风格指南建议将 propTypes 和 defaultProps 声明为类的静态属性，或在定义后作为类本身的属性。

来源：react/README.md676-706

组件声明指南

基本规则

一个文件一个 React 组件
- 例外：一个文件中可以包含多个无状态/纯组件
始终使用 JSX 语法
除非从非 JSX 文件初始化，否则避免使用 React.createElement

来源：react/README.md25-31

高阶组件命名

对于 HOC（高阶组件），请使用 HOC 和被包装组件的复合名称。

命名模式：withHOC(WrappedComponent)
设置 displayName 以反映此模式。

来源：react/README.md115-140

组件结构的 ESLint 规则

Airbnb ESLint 配置强制执行多项与组件结构相关的规则。

ESLint 规则	描述
`react/prefer-es6-class`	强制使用 ES6 类组件，而不是 `createClass`
`react/prefer-stateless-function`	鼓励在可能的情况下使用无状态函数
`react/no-multi-comp`	防止一个文件定义多个组件（有例外）
`react/sort-comp`	强制执行组件方法排序
`react/require-render-return`	确保 render 方法返回值
`react/no-unused-state`	防止未使用状态声明
`react/state-in-constructor`	控制状态初始化位置

来源：packages/eslint-config-airbnb/rules/react.js220-221 packages/eslint-config-airbnb/rules/react.js224-225 packages/eslint-config-airbnb/rules/react.js249-297

状态管理结构

状态初始化

状态应在 constructor 中初始化。

Airbnb 风格指南目前要求在 constructor 中初始化状态，尽管 ESLint 配置中的注释表明，一旦完全支持类属性语法，未来将优先使用该语法。

来源：packages/eslint-config-airbnb/rules/react.js492-494

总结

根据 Airbnb JavaScript 风格指南的 React 组件结构侧重于一致性、可读性和可维护性。关键方面包括：

根据需要选择合适的组件类型（类 vs 函数）
在类组件中遵循一致的方法排序
正确声明和组织 props 和 state
每个文件一个组件（有有限的例外）
使用一致的命名约定

遵循这些指南可确保 React 组件在大代码库和团队中保持可维护性。