React 学习——React.memo（简单、引用类型的prop）

1.  传递一个简单类型的prop，prop变化时组件重新渲染

2. 传递一个引用类型的prop，比较的是新值和旧值的引用是否相等;当父组件的函数重新执行时，实际上形成的是新的数组引用；

3. 保持引用稳定->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