React 内联对象和函数作为 props 为什么导致多余渲染？

Question

仓乃文 · Accepted Answer

每次渲染时内联创建的对象和函数都是新引用，React.memo 的浅比较认为 props 变了，导致子组件不必要的重渲染。解法是用 useMemo 缓存对象、useCallback 缓存函数。问题演示： ```javascript const Child = React.memo(({ style, onClick }) => { console.log("Child rendered"); // 每次父组件渲染都会执行 return

子组件

; }); function Parent() { const [count, setCount] = useState(0); return ( setCount(c => c + 1)} // 每次渲染新函数 /> ); } ``` 解决方案： ```javascript function Parent() { const [count, setCount] = useState(0); const style = useMemo(() => ({ color: "red" }), []); // 缓存对象 const handleClick = useCallback(() => setCount(c => c + 1), []); // 缓存函数 return ; } ``` 补充说明： - JS 中 {} !== {} 和 (() => {}) !== (() => {})，引用比较永远不等 - 原始类型（string、number、boolean）不存在此问题，"red" === "red" - useMemo/useCallback 本身也有开销，不要无脑给所有 props 加缓存 - React DevTools Profiler 可以确认哪些组件在无效渲染，再针对性优化 - React 19 编译器（React Compiler）可以自动缓存，未来可能不需要手动 useMemo/useCallback