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

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

2. 传递一个引用类型的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