React中useReducer、useMemo、useCallback是否属于常用Hook?
React的useReducer、useMemo、useCallback到底什么时候用?
一句话说清:不是只有复杂项目才用,而是遇到特定问题时才需要,基础教程/克隆项目没出现,是因为它们的场景根本不需要这些工具。
先聊useReducer
它不是用来替代useState的“高级版”,而是当状态逻辑变复杂时,让代码更可控的方案:
- 比如你的组件里有多个关联状态(比如表单的输入值、提交状态、错误信息),或者状态是嵌套对象,每次更新要改好几个地方,这时候把所有状态更新逻辑集中到reducer函数里,比写一堆分散的
setState要清晰得多,后期维护也方便。 - 像Netflix、Spotify这类克隆项目,大多是展示数据、简单交互,状态逻辑单一,用
useState完全够用,没必要折腾useReducer。
再说说useMemo和useCallback
这俩都是性能优化工具,核心是“避免不必要的重复工作”:
- useMemo:缓存昂贵计算的结果。比如你要对一个大数组做过滤、排序,每次组件重渲染都跑一遍的话会卡,这时候用useMemo把结果存起来,只有依赖的数组变了才重新计算。如果你的组件里没有这种耗时操作,用它纯属多余。
- useCallback:缓存函数的引用。当你把父组件的函数传给子组件时,如果父组件每次重渲染都创建新的函数,就算子组件用
React.memo做了缓存,也会被触发重渲染。这时候用useCallback把函数存起来,只有依赖项变了才更新函数引用,就能避免子组件无效重渲染。 - 基础项目里数据量小、组件层级简单,就算不做这些优化,用户也感觉不到性能问题,所以教程里不会特意讲——毕竟先把功能跑通才是新手的首要目标,优化是后续的事。
总结
刚学React一个月没用到这些钩子太正常了:
- 先把
useState、useEffect这些基础钩子用熟练,等你遇到状态逻辑乱成一团、或者组件渲染卡的时候,自然就会想起useReducer、useMemo、useCallback这些工具。 - 它们不是“高级开发者的专属玩具”,只是解决特定问题的工具——需要的时候用,不需要的时候别硬套。
内容的提问来源于stack exchange,提问作者gnw
相关产品推荐
相关产品推荐

