Fucntional Component

作用

如果你的組件在相同 props 的情況下渲染相同的結(jié)果，那么你可以通過將其包裝在 React.memo 中調(diào)用，以此通過記憶組件渲染結(jié)果的方式來提高組件的性能表現(xiàn)。這意味著在這種情況下，React 將跳過渲染組件的操作并直接復(fù)用最近一次渲染的結(jié)果。

React.memo 僅檢查 props 變更。如果函數(shù)組件被 React.memo 包裹，且其實現(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>
  );
}