react 中的计算属性 useMemo

介绍

本篇文章主要是讲解以下 useMemo的正确用法。你们没有看错，useMemo的出现使得react也有了 ‘计算属性’。

为什么要使用计算属性

其实主要优势就是性能好，通过下面例子可以看出。

比较计算属性与普通函数

使用函数完成计算功能

import {useState} from "react"

export default ()=>{
    const [a,seta]=useState(0)
    const [b,setb]=useState(1)
    const [c,setc]=useState(2)
   
    const sum_ab=()=>{
      console.log('re-compute')         // 通过打印可以看到计算是否重新执行
      return a+b
    }                                  // 只要组件重新渲染，无论何时重新计算
    
    const add_a=()=>{
        seta(a+1)
    }
    const add_b=()=>{
        setb(b+1)
    }
    const add_c=()=>{
        setc(c+1)
    }
    
    return (
    <div>
        <p>computed a+b：{sum_ab()}</p>
        <button onClick={add_a}>a++</button>
        <button onClick={add_b}>b++</button>
        <button onClick={add_c}>c++</button>    
    </div>
    )
}

使用计算属性实现计算功能

import {useMemo,useState} from "react"

export default ()=>{
    const [a,seta]=useState(0)
    const [b,setb]=useState(1)
    const [c,setc]=useState(2)
    const sum=useMemo(()=>{
      console.log('re-compute')    // 通过打印可以看到计算是否重新执行
      return a+b
    },
    [a,b])    // 只有当数组中包含的状态发生变化时，才会重新计算值
    
    const add_a=()=>{
        seta(a+1)
    }
    const add_b=()=>{
        setb(b+1)
    }
    const add_c=()=>{
        setc(c+1)
    }
    
    return (
    <div>
        <p>computed a+b：{sum_ab}</p>
        <button onClick={add_a}>a++</button>
        <button onClick={add_b}>b++</button>
        <button onClick={add_c}>c++</button>    
    </div>
    )
}

通过按钮调试，再观察两处的打印时机，就会发现计算属性的性能更好。

结尾

感谢各位的观看，如果有疑惑，欢迎提出和分享，希望这篇文章能给你带来帮助。