React HookAPI useState()

useState是React Hook中聲明變量的方法，useState提供了一個獲取方法、一個設置方法

import React from 'react'; // useState是React的方法使用useState方法時要提前引入React依賴包

const [state, setState] = React.useState(initalState);

參數

1. state -> 獲取方法，返回的狀態 (state) 與默認值 (initalState) 全等
2. setState -> 設置方法，setState 函數用於更新 state。它接收一個新的 state 值並將組件的一次重新渲染加入隊列。setState 是一個函數（setState()），函數中可以傳入具體的值，也可以添加一個回調

• • setState(newState);
    
    setState(() => {
         return newState;
    });　

　　3. initalState -> 默認值

　　注意

　　　　React 會確保 setState 函數的標識是穩定的，並且不會在組件重新渲染時發生變化。這就是為什么可以安全地從 useEffect 或 useCallback 的依賴列表中省略 setState。

• • import React from "react";
    
    const App = () => {
      const [state, setState] = React.useState("hello world");
    
      console.log(state); // hello world
      React.useEffect(() => {
        setState("hello hook");
      }, []);
    
      console.log(state); // hello hook
    
      return <div></div>;
    };

    useEffect 和 useCallback 都可以接收兩個參數，分別是方法回調和依賴項數組，依賴項的作用是當發生改變時，方法的回調會執行，所以因為 setState 的函數表示穩定不會發生變化，所以值不會發生變化，依賴沒有意義

    在 CodeSendBox 上嘗試

 惰性初始 state

　　 initialState 參數只會在組件的初始渲染中起作用，后續渲染時會被忽略。如果初始 state 需要通過復雜計算獲得，則可以傳入一個函數，在函數中計算並返回初始的 state，此函數只在初始渲染時被調用

• • import React from "react";
    
    const App = () => {
      const [state] = React.useState(() => {
        const num = 1 + 1;
        return num;
      });
    
      console.log(state); // 2
    
      return <div></div>;
    };

　　 　　　 此時useState中的回調函數使用來為state設置默認值，所以一定要用return語句將結果返回出去，否則state值仍為undefined，回調函數無意義

 　　　　    在 CodeSendBox 上嘗試