-
传递一个简单类型的prop,prop变化时组件重新渲染
-
传递一个引用类型的prop,比较的是新值和旧值的引用是否相等;当父组件的函数重新执行时,实际上形成的是新的数组引用;
-
保持引用稳定->useMemo 组件渲染的过程中缓存一个值
import { memo, useMemo, useState } from 'react'; const MemoSon = memo(function Son({count,list}){ console.log('子组件渲染',count); return <div>子组件</div> }) const App = () => { const [count, setCount] = useState(0);//简单类型 // const list = [1,2,3,4,5];//引用类型 const list = useMemo(()=>{ //缓存,子组件就不会跟着重新渲染了 return [1,2,3,4,5]; },[]) return ( <div className="home"> {/* count={count} */} <MemoSon list={list} /> <button onClick={() => setCount(count + 1)}>+{count}</button> </div> ) } export default App
08-19
128
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
07-28