useMemo使用示例

参考学习视频

这东西 和 vue 的 watch 差不多

useMemo 和 useEffect区别

相同点

两者在写法上有很大的相同之处 useMemo第一个参数需要返回一个函数，useEffect也可以返回一个函数 两者第二参数都可以放一个数组，里边的元素有着浅比较触发函数的作用

不同点

useMemo是dom更新前触发的，useuseEffect是dom更新后触发的 useMemo主要能和useCallback联合使用，利用其浅比较的能力和useCallback缓存函数的作用一起封装组件，见另一篇文章 useEffect主要用来模拟生命周期

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import React, { useMemo, useReducer } from 'react'

const Table = (props)=> {
  return (
    <div>
      table: current = {props?.page}
    </div>
  )
}
const Pagination = (props) => {
  let pags = [1,2,3]
  let clicked = props.callback||props.dispatch

  let page = props.page||1
  useMemo(()=>{
    console.log('memo, page=',page)
  },[page])
  return (
    <div>
      pagination : 
      {
        pags.map(cur => {
          return (
            <button key={cur} onClick={()=>clicked && clicked({
              page:cur
            })} >{cur}</button>
          )
        })
      }
      
      
      ; 当前页数： = {page}
    </div>
  )
}

export default function ReducerDemo() {

  const [page ,setPage ] = useReducer((state,payload) => {
    console.log(state,payload)
    return payload.page||state
  },1)

  
  return (
    <div>
      <Table page={page} />
      <Pagination dispatch={setPage} page={page} />
        
    </div>
  )

}