在react函数式组件中使用计算属性

在react中使用计算属性可以用两个hook实现

1.useCallback（fn,deps）

let [a,setA] = useState()
let [b,setB] = useState()
function incrementA(){
    setA(++a)
}
function incrementB(){
    setB(++b)
}
const result = useCallback(
    () => {
      return a+b
    },
    [a,b]
);
return (
    <>
        <div>{result}</div>
        <button onClick={incrementA}>加a</button>
        <button onClick={incrementB}>加b</button>
    </>
)

2.useMemo(() => fn,deps)

let [a,setA] = useState()
let [b,setB] = useState()
function incrementA(){
    setA(++a)
}
function incrementB(){
    setB(++b)
}
const result = useMemo(
    () => {
      return function(){
        return a+b
      }
    },
    [a,b]
);
return (
    <>
        <div>{result}</div>
        <button onClick={incrementA}>加a</button>
        <button onClick={incrementB}>加b</button>
    </>
)

其实 useCallback(fn, deps) 就相当于 useMemo(() => fn, deps)，你可以把 useMemo 作为性能优化的手段

记住，传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。