useMemo

回顾类组件计算属性的用法

class Student extends Component{
    get total(){
        return this.state.count+20
    }
}

函数组件我们需要计算属性,我们要用useMemo这个函数

作用

useMemo的作用类似vue中的计算属性computed,即根据母体数据衍生出新的数据，一旦母体数据发生变化，则 useMemo会自动执行

语法

import React { useMemo, useState } from 'react'
function Hello () {
  const [firstName, setFirstName] = useState("张");
  const [lastName, setLastName] = useState("三");
  const name = useMemo(() => {
    return firstName + lastName
  }, [firstName, lastName]);
  function changeName () {
    setFirstName('李');
    setLastName('四')
  }
  return (
    <div>我叫：{name} <button onClick={changeName}>点我修改姓名</button></div>
  )
}

需要提供两个参数

• 参数一
  • 回调函数，必须有一个返回值，执行计算的结果
• 参数二
  • 提供一个数组,数组里面存放要监控的对象\变量，即依赖项

useMemo执行过后会返回一个值，该值即使第一个参数（函数）执行过后的返回值，每当依赖项发生变化，该函数都会重新执行，useMemo返回值也就被更新了

注意

useMemo的依赖项必须传递，否则，每次更新界面的时候useMemo都会重新计算，影响性能