1.25 惰性初始化状态的值

一、惰性初始化状态的值

1. 当状态的初始值需要通过复杂计算才能得到的话，可以对其进行惰性初始化操作

2. 非惰性初始化值：

   import { useState } from 'react'
   
   function computed(n: number) {
     console.log('初始化')
     // 假如是一个超级复杂的计算
     return n * n
   }
   
   function App() {
     // 模拟初始值是通过复杂计算得来的
     const [count, setCount] = useState(computed(2))
   
     const handleClick = () => {
       setCount(count + 1)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>按钮</button>
         {count}
       </>
     )
   }
   
   export default App

3. 修改为惰性初始化后：

   import { useState } from 'react'
   
   function computed(n: number) {
     console.log('初始化')
     // 假如是一个超级复杂的计算
     return n * n
   }
   
   function App() {
     // 模拟初始值是通过复杂计算得来的
     // 通过函数获取初始化值，，就是惰性初始化
     const [count, setCount] = useState(() => computed(3))
   
     const handleClick = () => {
       setCount(count + 1)
     }
   
     return (
       <>
         <div>Default Template</div>
         <button onClick={handleClick}>按钮</button>
         {count}
       </>
     )
   }
   
   export default App
   

   就是在初始化的时候修改的初始化的方案，用来作为惰性初始化的操作