Memo Hook

Memo Hook

用于保持一些比较稳定的数据，通常用于性能优化

useMemo和useCallback使用场景类似，但是useMemo相较于useCallback用法更加强大

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

const Item = (props) => {
  console.log('Item Render')
  return <li>{ props.value }</li>
}


// useMemo和useCallback功能类似
// 区别：useCallback是对函数进行缓存，useMemo可以对任何类型进行缓存
// useMemo()的第一个参数是一个函数，函数返回值为要缓存的对象，第二个参数是缓存依赖项，
// 只要依赖项没有发生改变，缓存就不会发生改变。在进行多个DOM渲染时，往往可以极大的提高性能。
const App = () => {

  const [range, setRange] = useState({ min: 1, max: 1000 })
  const [inputValue, setInputValue] = useState(0)

  const list = useMemo(() => {
    const list = []
    for (let i = range.min; i <= range.max; i++) {
      list.push(<Item key={ i } value={ i } />)
    }
    return list
  }, [range.min, range.max])

  return (
    <div>
      <ul>
        { list }
      </ul>
      {/* input框内容发生改变 逻辑上不应该影响list 所以对list进行缓存 list是否重新渲染
          只和range的取值范围相关
      */}
      <input type="number" value={ inputValue } onChange={ e => setInputValue(+e.target.value) } />
    </div>
  )
}

export default App