chenlmw的博客

这个实战项目实现了：路由集中配置、嵌套路由、编程式导航、动态参数传递以及获取、路由守卫、声明式跳转。麻雀虽小，五脏俱全哈~Vue 更倾向于集中式配置与隐式结构注入；React Router 强调显式组合、组件优先、Hooks 驱动；从路由配置、导航跳转，到嵌套结构、懒加载、权限控制，React Router 提供了一个更灵活但也更自由的生态。如果你是 Vue 开发者，这篇文章相信能让你在理解差异的基础上，快速掌握 React Router 的使用方式和设计理念。

用了这么久 React，是时候自己封装个组件玩玩了。这次我们不讲虚的，从 0 开始动手写一个 Modal，支持受控、Portal 挂载等功能，写完你绝对能吹。

面试官冷冷一笑，盯着我手里的简历。“你说你写过 React 项目？”“是的。”“那……受控组件和非受控组件，讲讲。”我心头一震，表面淡定地微笑，脑子却飞快回想起那些我曾无数次敲下的 `value`、`onChange`、`ref.current`……

useContext虽然让跨层级传参变得优雅，但它对性能的副作用常常被忽视：只要value的引用发生变化，所有消费它的组件都会无差别更新，哪怕这些组件并未使用发生变化的那部分值。useMemo 保持 value 稳定：避免不必要的引用变化；memo 缓存消费组件：提升组件重用率，减少重渲染；组件职责拆分：精细控制渲染粒度，配合memo更高效。当这三种策略协同配合时，能最大化发挥 React 的性能潜力，实现真正意义上的按需渲染。希望这篇文章能帮你更深入理解useContext重学 React系列。

useReducer是 React 中一把处理复杂状态的利器，尤其适合逻辑多、状态依赖强的场景。对 Vue 用户来说，它就像是 React 版的 Vuex，用起来既熟悉又顺手。如果你在用useState管状态用得头大，不妨试试useReducer，真的会上瘾！希望这篇文章能帮你快速掌握useReducer重学 React系列！

作为一个 Vue 转 React 的前端，我们早就习惯了使用 Vuex 来管理全局状态，什么 state、mutation、action 一套操作下来玩得贼熟练。但在 React 中，我们没有 Vuex 了，要怎样去进行状态管理呢？

对 Vue 开发者来说，初见 `useMemo` 很容易以为它就是 React 版的 `computed`，但真相可能让你大吃一惊：它**不是**响应式的魔法工具，也**不是**你随手就该加的性能“神器”。

如果你是从 Vue 转到 React 的开发者，初见 `useRef` 可能会想：这不就是 React 版的 `ref` 吗？但真相是 —— 它能做的，比你想象得多得多。

如果你刚从 Vue 进入 React 世界，useEffect可能是你最容易踩坑的 Hook。它看起来像 Vue 的生命周期函数，实际却大不相同。你是不是也遇到过这些疑惑？“它到底是mounted还是updated的替代？“为什么我的副作用逻辑会无限触发？“依赖项到底该不该加？加了它就炸，不加它报错？别急，这篇文章我会从运行时机、依赖项、清除机制到常见陷阱，逐一帮你搞清楚useEffect的使用姿势。

作为 Vue 转 React 的前端，我刚开始接触 `useState` 时踩了不少坑。这篇文章我会用尽量通俗的方式，帮你彻底掌握它的用法和原理！