Day27-useMemo

前言

前两天我们学习了React性能优化

memo 组件记忆
useCallback 函式参考记忆

而今天我们会学习useMemo来记住回传值，避免每次重复函式计算。

useMemo

syntax

useMemo(() => {
    //block
},[dependency])

以下我们有个组件，只要组件内的input表单输入，或是点击add button使state增加都会重新执行for回圈。

//App.js
import React, {useState,useMemo} from 'react'

function App() {
  const [name, setName] = useState('')
  const [state, setState] = useState(0)

  let temp = 0

  for(let i = 0; i < state; i++) {
    console.log('changed')
    temp += i
  }

  return(
    <div>
      <p>Memo:{temp}</p>
      <p>{state}</p>
      <button onClick={() => setState(state+1)}>add</button>
      <div>
        <input type="text" onChange={(e) =>setName(e.target.value)}/>
        <p>{name}</p>
      </div>
    </div>
  )
}

export default App

但我们只要state的值改变才执行回圈，而不是组件中状态改变就执行一遍。

於是我们使用useMemo纪录前一次的数值，并且绑定我们的依赖到state。

当state的值被改变了，才会呼叫callback执行回圈，若依赖的数值没有改变，便会回传上次所记忆的数值。

这样我们可以避免额外的操作导致效能浪费。

//App.js
import React, {useState,useMemo} from 'react'

function App() {
  const [name, setName] = useState('')
  const [state, setState] = useState(0)


  const result = useMemo(() => {
    let temp = 0
    for(let i=0; i <= state; i++) {
      temp += i
    }
    return temp
  },[state])

  
  return(
    <div>
      <p>Memo:{result}</p>
      <p>{state}</p>
      <button onClick={() => setState(state+1)}>add</button>
      <div>
        <input type="text" onChange={(e) =>setName(e.target.value)}/>
        <p>{name}</p>
      </div>
    </div>
  )
}

export default App