React.memo 和 useMemo 怎么配合避免无效渲染？

Question

仓乃文 · Accepted Answer

React.memo 对组件做浅比较避免父组件重渲染时子组件跟着渲染，但内联对象和函数作为 props 时浅比较永远不等。useMemo 缓存对象和函数的引用，配合 React.memo 才能真正避免无效渲染。问题场景： ```javascript const MemoChild = React.memo(Child); function Parent() { const [count, setCount] = useState(0); // 每次渲染创建新对象/函数 → React.memo 浅比较失败 → 子组件照样渲染 return {}} />; } ``` 解决方案： ```javascript const MemoChild = React.memo(Child); function Parent() { const [count, setCount] = useState(0); const style = useMemo(() => ({ color: "red" }), []); // 缓存对象引用 const handleClick = useCallback(() => {}, []); // 缓存函数引用 return ; } ``` 子组件内部优化： ```javascript const ExpensiveList = React.memo(function List({ items, filterFn }) { // items 或 filterFn 引用不变时跳过渲染 return items.map(item =>

{filterFn(item)}

); }); ``` 补充说明： - React.memo 只做浅比较，嵌套对象变化检测不到 - useMemo/useCallback 不加 React.memo 等于白用，父组件渲染时子组件照样渲染 - 不要过度使用 memo，先用 React DevTools Profiler 确认有性能问题再优化 - 原始类型 props（string、number）不需要 useMemo，浅比较天然有效