React在构建高性能前端应用时有哪些最佳实践？

本文共计2185个文字，预计阅读时间需要9分钟。

目录 + 引用 + 包装 + Context.Provider 作为父组件 + 使用 Context Hook + 使用 React 顶层 API + 动态设置样式 + 复用 Context，实现其他子组件 + 抽取共同状态逻辑 + 自由组合父组件与子组件 + 示例

目录

• 引言
• 包装 Context.Provider 作为父组件
• 使用 Context Hook 来实现子组件
• 使用 React 顶层 API 动态设置样式
• 复用 Context，实现其它子组件
• 抽取共同状态逻辑
• 自由组合父组件与子组件
• 示例

引言

单选，多选，是很常见的 UI 组件，这里以它们为例，来讲解如何分离布局组件和状态组件，以实现较好的复用性。

假如我们要实现如下需求：

这类 UI 有如下特点：

• 不管是单选还是多选，都可以有网格布局，我们可以把这个网格布局单独抽离出来，放到一个独立的组件中。
• 多选有 Label 形式和 CheckBox 形式，表现形式不一样，但是状态逻辑是一样的，我们可以单独封装这个状态逻辑。
• 单选有 Label 形式和 RadioButton 形式，表现形式不一样，但是状态逻辑是一样的，我们可以单独封装这个状态逻辑。
• 布局可以很复杂，在某个层级中，才会发生选择行为。

现在让我们一步一步来实现一个设计良好的，可复用的 UI 组件。