Fucntional Component
作用
如果你的組件在相同 props 的情況下渲染相同的結(jié)果封救，那么你可以通過將其包裝在 React.memo 中調(diào)用拇涤，以此通過記憶組件渲染結(jié)果的方式來提高組件的性能表現(xiàn)。這意味著在這種情況下誉结，React 將跳過渲染組件的操作并直接復(fù)用最近一次渲染的結(jié)果鹅士。
React.memo 僅檢查 props 變更。如果函數(shù)組件被 React.memo 包裹惩坑，且其實(shí)現(xiàn)中擁有 useState掉盅，useReducer 或 useContext 的 Hook，當(dāng) state 或 context 發(fā)生變化時以舒，它仍會重新渲染趾痘。
與PureComponent區(qū)別
PureComponent只能用于class組件，memo用于functional組件
import React, { useState } from 'react'
// 只要父組件的count更新蔓钟，Child組件就會跟父組件一起重新渲染
// function Child() {
// console.log('child')
// return <p>子組件</p>
// }
// 使用React.memo緩存優(yōu)化剔交，只有當(dāng)title的值每次都不一樣的時候，才會渲染西乖，其他與其無關(guān)的值變化允跑，它不會再次渲染
const Child = React.memo((props) => {
console.log('child')
return <div>
<h3>{props.title}</h3>
<p>child</p>
</div>
})
export default function App() {
const [count, setConut] = useState(1)
const [title, setTitle] = useState('默認(rèn)標(biāo)題11')
return (
<div className="App">
<h1>React.memo</h1>
<p>{ count }</p>
<button onClick={() => setConut(count => count +1)}>count加1</button>
<button onClick={() => setTitle('新標(biāo)題')}>設(shè)置title</button>
<Child title={title} />
</div>
);
}
