工作坊

React Hooks 与状态管理

深入了解 React 内置的 Hooks，然后从 Context 到 Zustand 与 Redux 的状态管理。适用于 React 和 React Native 团队。

前置条件

最好已有 React（或 React Native）以及 JavaScript/TypeScript 的实际开发经验。

动手实践的形式

现场编码演示 🖥，随时提问。
探索性任务 🔭，动手摆弄，发现 Hooks 的真实运作方式。
编码练习 💻，编写并重构真实的代码。

我们会涵盖什么

这是一份主题菜单，根据时间长短，我们一起挑选对你的团队最相关的部分。

真正理解 useState

组件的“render”与浏览器渲染的区别
异步设置与获取状态，React 18 中的批处理
JavaScript 闭包，浅拷贝与深拷贝
状态提升：回调与 props

useEffect 与生命周期

与浏览器渲染绑定的 Hooks 生命周期
开发环境中的 React 18 StrictMode
exhaustive-deps 与修复依赖数组

其余的 Hooks

useLayoutEffect 用于处理复杂的 UI
useRef：不触发渲染的存储与命令式状态
useReducer 处理更丰富的状态
自定义 Hooks：简洁的 API、TypeScript，以及将逻辑与 UI 分离
useImperativeHandle 配合 forwardRef

性能

为什么 React.memo 不是万能药
使用 useCallback 减少重新渲染
使用 useMemo 处理昂贵的计算

状态管理

内置方案：useReducer、Context、自定义 Hooks
Zustand：简单的全局状态与 selector
使用 redux-toolkit 的 Redux：slice 与 thunk
使用 redux-saga 编排异步流程
使用 redux-persist 保存离线状态

为什么选我

我从 2015 年 12 月起就用 React 和 React Native 做开发，当时作为创业公司的 CTO 选择了它，此后为 Barclays、McKinsey、REWE、DATEV 和 Condor 的团队做过培训。我在 Stack Overflow 上的 React Native 和 JavaScript 排名位列全球前 5%，也负责 Workshops.de 的 React / React Native 方向。

看看我培训过的团队听听学员怎么说

把这个工作坊带给你的团队

远程或现场，按你团队的水平量身定制。

全部工作坊咨询

React Hooks 与状态管理

我们会涵盖什么

更多工作坊

把这个工作坊带给你的团队