react中的computed计算属性-useMemo

在vue中需要根据某些属性进行计算或者映射出别的值时，可以使用computed计算属性，只有当所需要依赖的值改变时才会从新进行计算否则就会直接返回上一次计算的值。在react中时是没有直接这样的属性的，那么下面一起看下在react中时怎样实现计算属性功能的呢？

在react中要实现类似计算属性的功能很简单，可以使用useMemo这个hook进行实现，useMemo这个hook同样也具有缓存的功能，且当依赖项改变时才会重新执行。代码如下：

import React, { useMemo, useState } from 'react'
export default function Compoted() {
  const [num, setNum] = useState(0)
  const numList = useMemo(() => {
    const list = []
    for (let index = 0; index < num; index++) {
      list.push(index)
    }
    console.log(num, list)
    
    return list
  }, [num])
  return (
    <div>
      {numList.map(item => <p key={item}>{`数字为${item + 1}`}</p>)}
      <button onClick={() => setNum(num + 1)}>我是增加的按钮</button>
    </div>
  )
}

上述代码使用useMemo这个hook，它传入两个参数第一个参数是一个callback函数（返回计算后的值），第二个参数为数组数组里为计算所依赖的值（可以为多个值，直接在数组里卖弄添加即可），当第一次执行后useMemo会把获取的numList值缓存起来，只有当依赖的num值改变时它才会重新计算，没有改变时直接返回上次计算的值，这样就实现了类似计算属性的功能。效果如下：