前面講了運用useState和useContext可以讓App可以做一些狀態的改變，但是如果將App關掉重開你會發現之前做改變又全部回到初始狀態了，這時候就需要使用useEffect與AsyncStorage將狀態存到手機（local storage）裡！

useEffect

useEffect可用來處理APP的畫面渲染以外的工作，例如：

• 存取local storage
• 設定動畫
• 設定自訂的字型
• 從網路取得最新資料存入狀態變數

我主要會利用useEffect使用存取local storage和設定動畫這兩個功能。

useEffect被執行的時機

    useEffect(執行的函數fn,[依賴的變數])

useEffect宣告在元件內，用來規劃元件渲染之後的工作，在元件完成渲染工作後就會執行函數fn。
如果useEffect沒有設定第二個參數，則每次畫面重新渲染後都會執行函數fn；如果第二個參數設定為[狀態變數]，則只有在此狀態變數被改變時fn才會執行；如果第二個參數設定為[]，則在第一次渲染畫面時fn才會被執行。

AsyncStorage

因為App屬於個人化的程式，因此需要把使用者操作的結果儲存在手機裡（或雲端）。針對手機的資料儲存，React Native提供了AsyncStorage指令來整合iOS與Android的不同指令，讓開發者可以用相同的指令來處理兩個系統的資料儲存。

AsyncStorage的使用

首先，要先將AsyncStorage匯入檔案裡。

import {AsyncStorage} from "react-native";

AsyncStorage的資料由setItem儲存資料(AsyncStorage.setItem('key',value))，getItem取得資料( AsyncStorage.getItem('key'))

• 設定要儲存的資料
  將此段程式加在需要儲存資料的頁面js檔裡：

    const { meState } = useContext(StoreContext);
    const [me, setMe] = meState;
    const saveToAsyncStorage = () => {
        try {
          AsyncStorage.setItem('ME_PERSISTENCE_KEY', JSON.stringify(me));
          AsyncStorage.setItem('HAS_SET_KEY', JSON.stringify(true));
        } catch (error) {
          // Error saving data
        }
      };
  
      useEffect(() => {
        saveToAsyncStorage();
      }, [me]);
  

• 取得儲存在手機裡的資料
  開啟儲存所有狀態變數的progressstore.js檔，在StoreProvider函式裡加入以下程式碼：

    const restoreState=async () => {
        try {
        const hasSetString = await AsyncStorage.getItem('HAS_SET_KEY');
        const hasSet = JSON.parse(hasSetString);
        if (hasSet) {
            const meString = await AsyncStorage.getItem('ME_PERSISTENCE_KEY');
            const state_me = JSON.parse(meString);
            setMe(state_me);
          }
        } catch (e) {}
    };
    useEffect(() => {
        restoreState();
      }, []);
  

  這樣就可以將所有的狀態變數都儲存到手機端裡了！