VIP20

本课程属于：020-Jetpack Compose界面API接入链路 移动端与Android应用开发 · 共 20 门相关课程，组合学习更完整。

查看所属VIP全部课程 →

← 返回所属目录咨询 / 购买

React复杂界面状态提升与渲染性能优化

共计 30 章节

点击此处阅读海量试读课程：100+行业、1000+细分领域

状态提升的核心原则

单一数据源 · 自上而下数据流 · 兄弟状态共享

状态提升的核心原…单一数据源

识别需要提升的状态

从组件内局部状态到跨组件共享的判定条…

识别需要提升的状…从组件内局部状态…

状态提升的层级决策

最小共同祖先 · 避免过度提升与提升不足

状态提升的层级决…最小共同祖先

React中状态提升的基本实现

父组件state + props传递…

React状态提升的基本实…

使用Context替代逐层props

适用场景 · Provider封装 · useContext消费

组合组件模式与状态提升

Render Props · Children作为函数 · 复合组件

组合组件模式状态提升

Redux Toolkit全局状态提升

Slice定义 · store配置 · useSelector/useDis…

Zustand轻量状态提升

create store · 选择器 · 中间件集成

Zustand轻量状态提升

Jotai原子化状态提升

atom定义 · useAtom · 派生atom与异步atom

Jotai原子化状态提升

复杂界面中的状态分层

UI状态 · 业务状态 · 缓存状态的分离策略

复杂界面状态分层

表单场景的状态提升

表单全局校验 · 字段联动 · 提交数据聚合

表单场景的状态提…表单全局校验

表格与过滤器的状态提升

搜索条件 · 分页 · 排序的共享与同步

表格过滤器的状态提升

多步骤向导场景

步骤进度 · 表单数据 · 校验状态的集中管理

多步骤向导场景步骤进度

拖拽排序与看板

拖拽数据 · 位置变更 · 持久化的状态提升方案

拖拽排序看板

实时协作场景

WebSocket消息合并 · 冲突处理 · 乐观更新的状态提升

实时协作场景WebSocket

状态提升中的性能优化

React.memo · useMemo · useCallback的合理使用

状态提升性能优化

避免不必要的渲染

选择器粒度 · 状态切片 · 不可变更新

避免不必要的渲染选择器粒度

状态提升与组件解耦

自定义hooks封装公共逻辑 · 避免组件内联数据流向

状态提升组件解耦

状态提升在微前端中的挑战

iframe通信 · 跨应用store桥接 · Qiankun模式

状态提升微前端

状态提升的调试工具

React DevTools · Redux DevTools · 时间旅行调试

状态提升的调试工…React

测试状态提升代码

单元测试state更新 · 集成测试组件交互 · mock外部store

测试状态提升代码state

常见反模式

向下传递过多props · 同步衍生状态 · 全局状态滥用

常见反模式props

状态提升迁移策略

从本地状态逐步提升 · 遗留代码重构步骤

状态提升迁移策略从本地状态逐步提…

服务端状态与客户端状态提升

React Query/SWR · 缓存同步 · 乐观更新

服务端状态客户端状态提升

大型表单动态不可控字段

动态表单Schema驱动 · 字段注册与统一提升

大型表单动态不可…Schema

状态提升在移动端React Native中的应用

性能差异 · 导航状态共享

状态提升与SSR

hydration 一致性 · 服务端初始状态传递

SSR状态提升

失败案例复盘

过度提升导致组件难以复用 · 上下文嵌套过深

失败案例复盘过度提升导致组件…

状态提升的架构文档化

数据流图 · 组件依赖表 · 状态变更清单

状态提升的架构文…数据流图

从零构建一个复杂后台界面的状态提升方…

综合实战从零构建一个复杂…