性能优化 react中的memo

Fucntional Component

作用

如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。

与PureComponent区别

PureComponent只能用于class组件，memo用于functional组件

import React, { useState } from 'react'

// 只要父组件的count更新，Child组件就会跟父组件一起重新渲染
// function Child() {
//   console.log('child')
//   return <p>子组件</p>
// }

// 使用React.memo缓存优化，只有当title的值每次都不一样的时候，才会渲染，其他与其无关的值变化，它不会再次渲染
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('默认标题11')

  return (
    <div className="App">
      <h1>React.memo</h1>
      <p>{ count }</p>
      <button onClick={() => setConut(count => count +1)}>count加1</button>
      <button onClick={() => setTitle('新标题')}>设置title</button>
      <Child title={title} />
    </div>
  );
}