这是 React 面试中高频考点很多人会背概念但面试官更喜欢问PureComponent、memo、useMemo、useCallback 有什么区别什么时候用为什么能减少渲染你可以这样理解React 渲染原理父组件重新渲染时function Parent() { const [count, setCount] useState(0); return ( button onClick{() setCount(count 1)} /button Child / / ); }点击按钮后Parent render Child render即使 Child 的 props 没变Child /React 默认仍会重新执行 Child 函数。这就是性能浪费。1. PureComponent类组件专用class Child extends React.PureComponent { render() { console.log(child render); return divChild/div; } }相当于shouldComponentUpdate( nextProps, nextState ){ return false; }但实际上内部做的是浅比较Shallow Compare比较oldProps newProps oldState newState相同不更新不同重新渲染2. React.memo函数组件版本 PureComponentconst Child React.memo(() { console.log(child render); return divChild/div; });父组件function Parent() { const [count, setCount] useState(0); return ( button onClick{() setCount(count 1)} /button Child / / ); }点击按钮Parent renderChild 不会重新渲染。React.memo原理内部也是shallowEqual(oldProps, newProps)浅比较。memo失效场景Child user{{ name: Tom }} /每次 render{} ! {}引用变了。所以Child render Child render Child rendermemo失效。3. useMemo缓存值很多人误以为useMemo 防止组件渲染错。它缓存的是计算结果例如const total useMemo(() { return bigData.reduce(...) }, [bigData]);第一次执行reduce之后直接返回缓存结果不会重复计算。不用 useMemoconst total bigData.reduce(...)Parent 每 render 一次reduce执行一次数据大时非常耗性能。useMemo memo经典组合const user useMemo(() { return { name: Tom }; }, []); Child user{user}/这样user引用固定memo 才能生效。4. useCallback缓存函数很多人写Child onClick{() { console.log(click); }} /每次 rendernew Function()都会生成新函数。即使用了 memoconst Child memo(...)也会重新渲染。因为oldFn ! newFn解决const handleClick useCallback(() { console.log(click); }, []);Child onClick{handleClick}/这样函数引用固定memo 生效。useMemo vs useCallback很多面试官喜欢问。本质useCallback(fn,deps)等于useMemo(() fn, deps)源码思想就是这样。缓存值const user useMemo( () ({ name: Tom }), [] );缓存函数const fn useCallback( () {}, [] );面试总结API作用适用PureComponent类组件避免重复渲染ClassReact.memo函数组件避免重复渲染FunctionuseMemo缓存计算结果值useCallback缓存函数引用函数记住一句话PureComponent / memo 解决「组件重复渲染」 useMemo 解决「重复计算」 useCallback 解决「函数引用变化导致的重复渲染」实际项目中的最佳实践在你做 React 管理后台Ant Design、ECharts、大表格时最常见的优化组合是const columns useMemo(() [...], []); const handleSearch useCallback(() { ... }, []); const TableList memo(TableListComponent);特别是Ant Design TableECharts 图表大型表单树形组件