useState传入函数

useState传入普通变量， 每次组件更新都会执行

useState传入函数，只在组件渲染时执行一次

适合数据结构复杂， 计算成本高的场景

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

function genArr() {
    console.log('genArr...')
    const arr = new Array(100)
    arr.fill('hello')
    return arr
}

const Demo: FC= () => {
    console.log('demo...')
    // const [arr, setArr] = useState(['a','b','c'])
    const [arr, setArr] = useState(genArr)
    
    function addStr() {
        setArr([...arr, 'hello'])
    }
    
    return(
        <>
           <p>length {arr.length}</p>
           <div>
               <button onClick={addStr} ></button>
           </div>
        </>
    
    )
    
}

我们会发现genArr...只会打印两次, 即只会在函数渲染时执行一次（还有一次是开发环境下默认执行的），大大减少了重复计算