React.memo

1.基础使用

1. React.memo 相当于 React.pureComponent
   内部的shouldComponetUpdate对state和prop进行浅比较

import React, { useState, memo, useMemo, useCallback } from 'react'

const Child = memo(() => {
  const date = new Date()

  return (
    <div>
      当前时间:{date.getHours()} : {date.getMinutes()} : {date.getSeconds()}
    </div>
  )
})

const Parent = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={() => {
        setCount(count + 1)
      }}>+1</button>
      <Child />
    </div>
  )
}

function App() {
  return <div><Parent /></div>
}

export default App

2. 依据props的改变来变化

import React, { useState, memo, useMemo, useCallback } from 'react'

const Child = memo(() => {
  const date = new Date()

  return (
    <div>
      当前时间:{date.getHours()} : {date.getMinutes()} : {date.getSeconds()}
    </div>
  )
})

const Parent = () => {
  const [count, setCount] = useState(0)
  const [clickTimeCount, setClickTimeCount] = useState(0)

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={() => {
        setCount(count + 1)
      }}>+1</button>
      <button onClick={() => {
        setClickTimeCount(clickTimeCount + 1)
      }}>get current time</button>
      <Child count={clickTimeCount}/>
    </div>
  )
}

function App() {
  return <div><Parent /></div>
}

export default App

image.png

3. React.memo第二个参数

const Child = memo((props) => {
  const date = new Date()
  return (
    <div>
      当前时间:{props.count.clickTimeCount}
      <input type="text" onChange={props.onChange}/>
    </div>
  )
}, (prevProps,nextProps) => {
  // 返回false进行更新
  // 返回true不需要进行更新
  console.log(prev.count === next.count);
  return prev.count === next.count
})