useMemo

1. useMemo的使用

useMemo和useEffect 的使用基本上一样

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

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

  return (
    

      当前时间:{date.getHours()} : {date.getMinutes()} : {date.getSeconds()}
    
  )
})

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

  return (
    

      
count: {count}
       {
        setCount(count + 1)
      }}>+1
       {
        setClickTimeCount(clickTimeCount + 1)
      }}>get current time
      
    
  )
}

function App() {
  return 

}

export default App

useMemo的好处

1. 对子组件进行一定程度的优化
2. 在useMemo函数内通过复杂计算获取当前值得时候，不需要再父组件每次更新的时候重新计算，只要在依赖项发生变化的时候计算即可