Props、State 和事件

相关源文件

• packages/eslint-config-airbnb/rules/react.js
• react/README.md

本文档概述了 Airbnb JavaScript 风格指南在 React 组件中处理 props、state 和 events 的最佳实践。它提供了关于命名约定、验证、初始化、更新和绑定模式的指导，以确保一致、可维护且高性能的 React 代码。

有关 React 组件结构的信息，请参阅 React 组件结构。有关 JSX 格式和可访问性实践的信息，请参阅 JSX 格式和可访问性。

Props

Props（"properties" 的缩写）是 React 从父组件向子组件传递数据的机制。Airbnb 风格指南为有效使用 props 提供了特定的约定。

命名约定

• Prop 名称使用 camelCase（例如，userName，phoneNumber）
• 仅当 prop 值是 React 组件时，才使用 PascalCase（例如，Component={SomeComponent}）
• 避免将 DOM 组件 prop 名称（如 style, className）用于其他目的

来源： react/README.md291-306

Boolean Props

• 当 prop 显式为 true 时，省略 prop 的值
• 对于布尔型 prop 的命名，遵循既定的约定（尽管该规则默认是关闭的）

来源： react/README.md308-323 packages/eslint-config-airbnb/rules/react.js427-431

Props Validation and Default Values

• 始终使用 PropTypes 来验证 props
• 为所有非必需的 props 定义明确的 defaultProps
• 避免使用 any、array 和 object 作为 prop types，除非有 shape 定义

Props Validation Flow Diagram

来源： react/README.md402-430 packages/eslint-config-airbnb/rules/react.js227-233 packages/eslint-config-airbnb/rules/react.js398-401

Spread Props and Destructuring

• 谨慎使用 spread props，避免将不必要的 props 传递给组件
• 在 spreading 时过滤掉不必要的 props
• 始终使用解构赋值来处理 props、state 和 context

来源： react/README.md432-482 packages/eslint-config-airbnb/rules/react.js446-447

状态管理

State 表示组件的内部数据，这些数据会随着时间而变化。Airbnb 风格指南为妥善管理 state 提供了指导。

State Initialization

• 在构造函数中初始化 state（当前规则，尽管未来版本可能支持类字段）
• 在类字段中避免使用箭头函数进行 state 初始化

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

状态更新

• 切勿直接修改 state；务必使用 setState()
• 在 setState() 中不要依赖 this.state，因为它可能已过时
• 在生命周期方法中调用 setState 时要小心
  • 在 componentWillUpdate 和 componentDidUpdate 中避免使用
  • 不要在 componentDidMount 中使用（尽管 Airbnb 的配置中已禁用此规则）

State Update Lifecycle

来源： packages/eslint-config-airbnb/rules/react.js195-197 packages/eslint-config-airbnb/rules/react.js450-451 packages/eslint-config-airbnb/rules/react.js183-189 packages/eslint-config-airbnb/rules/react.js192-193

State Best Practices

• 不要定义未使用的 state 值
• 为提高性能，请考虑使用纯组件或实现 shouldComponentUpdate
• 永远不要依赖 React 的实例变量（如 this._isMounted）来管理 state

来源： packages/eslint-config-airbnb/rules/react.js422-423 packages/eslint-config-airbnb/rules/react.js418-419 packages/eslint-config-airbnb/rules/react.js199-201

事件

Events 是 React 组件中的用户交互。Airbnb 风格指南为事件处理程序的命名和绑定提供了约定。

命名约定

• 根据事件处理方法的目的对其进行命名
  • 处理事件的方法应以 handle 开头（例如，handleClick）
  • 作为 props 传递的回调函数应以 on 开头（例如，onClick）
• 用于此命名约定的 ESLint 规则默认是关闭的，但推荐使用这些约定

Event Naming Convention

来源： packages/eslint-config-airbnb/rules/react.js88-93 packages/eslint-config-airbnb/rules/react.js249-262

Binding Event Handlers

• 在构造函数中绑定事件处理程序，而不是在 render 中
• 不要在 JSX props 中使用 .bind()
• 不要在类字段中使用箭头函数作为事件处理程序

来源： react/README.md573-617 packages/eslint-config-airbnb/rules/react.js108-116

Using Arrow Functions for Closures

• 在 render 中使用箭头函数是可接受的，当需要向事件处理程序传递额外数据时
• 谨慎考虑 PureComponents 的性能影响
• 当需要访问列表项的详细信息时，在列表渲染中使用

来源： react/README.md557-572

Component Data Flow and Event Handling

理解 props、state 和 events 如何交互对于构建可维护的 React 应用程序至关重要。

React Data Flow Diagram

Event Handling Sequence

来源： react/README.md573-617 packages/eslint-config-airbnb/rules/react.js249-262

摘要表：Props、State 和 Events 的关键规则

类别	规则	ESLint 规则	严重性
Props	Prop 名称使用 camelCase	不适用	建议
Props	为 true 的布尔 Prop 省略值	react/jsx-boolean-value	error
Props	始终使用 PropTypes 进行验证	react/prop-types	error
Props	为非必需 Prop 定义 defaultProps	react/require-default-props	error
Props	谨慎使用展开 Prop	react/jsx-props-no-spreading	error
Props	始终使用解构来处理 Prop	react/destructuring-assignment	error
状态管理	在构造函数中初始化 state	react/state-in-constructor	error
状态管理	切勿直接修改 state	react/no-direct-mutation-state	off (但推荐)
状态管理	不要在 setState 中访问 this.state	react/no-access-state-in-setstate	error
状态管理	避免使用未使用的 state 值	react/no-unused-state	error
事件	在构造函数中绑定处理程序	react/jsx-no-bind	error
事件	处理程序命名约定	react/jsx-handler-names	off (但推荐)
事件	谨慎使用箭头函数	不适用	建议

来源： packages/eslint-config-airbnb/rules/react.js18-603

本指南根据 Airbnb JavaScript 风格指南，提供了处理 React 组件中 props、state 和 events 的基本最佳实践。遵循这些约定有助于创建一致、可维护且性能优良的 React 应用程序。