終究都要學 React 何不現在學呢？ - React 進階 - useMemo - (13)

發表於 2022-09-27 分類於 React

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

這一章節開始我們要來介紹一個新的 Hook 也就是 useMemo，但是再說明 useMemo 之前我們先來回顧一下 Vue 裡面與 useMemo 類似的東西，也就是 Vue Computed。

前言

這一章節開始我們要來介紹一個新的 Hook 也就是 useMemo，但是再說明 useMemo 之前我們先來回顧一下 Vue 裡面與 useMemo 類似的東西，也就是 Vue Computed。

Vue Computed

首先讓我們先回憶一下關於 Vue Computed 的用法，我們先來看一下下面這個例子：

const { createApp, ref, computed } = Vue;

const app = createApp({
  setup() {
    const num1 = ref(2);
    const total = computed(() => num1.value * 2)
    
    return {
      total
    }
  }
});

app.mount('#app');

在上方的例子中我們可以看到我們所熟悉的 Computed (計算屬性)，而這個計算屬性會回傳 num1 乘以 2 的值，而這就是我們所熟悉的 Composition API Computed 計算屬性最基本的用法。

忘了 Computed 的用法嗎？沒關係，這邊寫了一個簡單的範例讓你回憶一下

const { createApp, ref, computed } = Vue;

const app = createApp({
  setup() {
    const num1 = ref(2);
    const total = computed(() => {
      console.log('computed');
      return num1.value * 2
    })
    
    const add = () => {
      console.log('methods');
      return num1.value * 2
    }
    
    return {
      total,
      add
    }
  }
});

app.mount('#app');

當你打開 Console 的時候，你可以發現 Add 函式總共被呼叫了五次，因此 console.log('methods') 也出現五次，而這是因為我們在畫面上呼叫它了五次，但是 Computed 明明也是呼叫五次，但 console.log('computed') 卻只出現一次，這是因為 Computed 只會在資料改變時才會重新計算並執行，因此當資料沒有任何變化時，就不會再次執行，而這也就是我們所熟悉的 Computed 的特性。

那麼 React 的 useMemo 又是怎樣呢？讓我們接著往下看吧。

useMemo

看到前面的例子後，我們可以知道 Vue 的 Computed 會在資料有變動時才會重新計算，而這個特性就是我們在 React Hook 中的 useMemo。

首先讓我們將前面 Vue 的範例稍微改成 React Hook 版本，看一下 useMemo 是不是真的與 Vue Computed 類似

const App = () => {
  const num = 1;
  
  
  const total = React.useMemo(() => {
    console.log('useMemo')
    return num * 2
  });
  
  const add = () => {
    console.log('methods');
    return num * 2;
  }
  
  return (
    <div>
      <p>useMemo：{ total }</p>
      <p>useMemo：{ total }</p>
      <p>useMemo：{ total }</p>
      <p>useMemo：{ total }</p>
      <p>useMemo：{ total }</p>
      
      <p>methods：{ add() }</p>
      <p>methods：{ add() }</p>
      <p>methods：{ add() }</p>
      <p>methods：{ add() }</p>
      <p>methods：{ add() }</p>
    </div>
  )
}
const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);

以結果來講，確實是一樣的，因此我們可以知道 useMemo 也是在資料有變動時才會重新計算，而這也是我們在 React Hook 中的 useMemo 的特性。

所以我們就到這邊結束囉~

.
..
…
….
…..

沒有啦，其實 useMemo 還有其他特性，所以讓我們繼續往下看吧。

首先先讓我們看一段範例程式碼

const App = () => {
  const [ users, setUsers ] = React.useState([]);
  
  const getData = async () => {
    // 有時候會發生 CORS，只需要重新整理即可
    const { data } = await axios.get('https://randomuser.me/api/?results=10');
    setUsers(data.results);
  }
  
  React.useEffect(() => {
    getData()
  }, []);
  
  return (
    <div>
      <ul>
        {
          users.map((user) => (
            <li key={user.email}>
              { user.name.first + user.name.last }
            </li>
          ))
        }
      </ul>
    </div>
  )
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);

這個範例程式碼我們會使用到 RandomUser 這個服務，這個服務在練習跟需要一些假的使用者資料時非常好用，完全不用擔心裡面有任何真人個資唷。

那麼 useMemo 除了與 Vue 的 Computed 神似之外，它還有什麼特性呢？首先 useMemo 其實可以傳入兩個參數，分別是 Callback 與 Array，而 useMemo 會去記憶 Callback 計算後的結果，也就是 memoized 的概念，甚至你也可以在第二個陣列中傳入想要監聽的變數，當監聽的變數有變化時就會出發渲染

1 2	const [ users, setUsers ] = React.useState([]); const newUsers = React.useMemo(() => {}, [ users ])

但是如果你沒有傳入第二個陣列的話，則會在每一次觸發渲染時就執行一次 useMemo，如同前面範例一樣。

接下來讓我們實際撰寫一下會更有感覺，首先前面有提到 RandomUser 這個服務，在我們透過 AJAX 請求資料之後，我們會需要使用 sort 重新排序，所以你有可能這樣撰寫

const App = () => {
  const [ users, setUsers ] = React.useState([]);;
  const [ state, setState ] = React.useState(false);

  const getUsers = async() => {
    const { data } = await axios.get('https://randomuser.me/api/?results=10');
    setUsers(data.results);
  }

  React.useEffect(() => {
    getUsers();
  }, []);

  const filterUsers = (state) => {
    const newUser = users.sort((a, b) =>  {
      if(state) {
        return a.dob.age < b.dob.age ? 1 : -1
      }
      return a.dob.age > b.dob.age ? 1 : -1
    });
    
    setUsers([...newUser]);
  }

  return (
    <div>
      <button onClick={ () => filterUsers(true) } className="border-4 border-indigo-500">年齡大到小</button>
      <button onClick={ () => filterUsers(false) }className="border-4 border-indigo-500 ml-4">年齡小到大</button>
      <hr className="my-4"/>
      <ul>
        {
          users.map((user) =>(
            <li key={ user.email }>
              { `Name：${user.name.title}.${user.name.first } ${user.name.last}, Age：${user.dob.age}` }
            </li>
          ))
        }
      </ul>
    </div>
  )
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);

雖然畫面是有正常顯示且排序，但這樣做其實並不是一件好事，因為我們每次點擊按鈕都會觸發 filterUsers，而 filterUsers 會去重新排序，這樣就會造成效能上的浪費，因為我們只是想要重新排序，而不是重新渲染，所以我們可以使用 useMemo 來優化這個問題

這邊也題外話一下，你可能會注意到 filterUsers 中的 setUsers 我是重新做陣列展開的方式 setUsers([...newUser]);，這邊會這樣寫的原因是因爲 sort 會直接修改原本的陣列，因此如果你是直接 setUsers(newUser); 的話，你會發現畫面並不會重新渲染，因為我們並沒有修改資料，所以 React 在認知上就不會重新渲染，所以我們必須要做陣列展開的方式，讓 React 認知到我們有修改資料，才會重新渲染。

接著讓我們來看一下 useMemo 這個 Hook，那該怎麼寫，其實很簡單就把它當作在寫 Vue 的 computed 就好，只是我們會特別監聽 state 這個值有變化時才去觸發 useMemo

const App = () => {
  const [ users, setUsers ] = React.useState([]);;
  const [ state, setState ] = React.useState(false);

  const getUsers = async() => {
    const { data } = await axios.get('https://randomuser.me/api/?results=10');
    setUsers(data.results);
  }

  React.useEffect(() => {
    getUsers();
  }, []);

  const filterUsers = React.useMemo(() => {
    return users.sort((a, b) =>  {
      if(state) {
        return a.dob.age < b.dob.age ? 1 : -1
      }
      return a.dob.age > b.dob.age ? 1 : -1
    });
  }, [ state ])

  return (
    <div>
      <button onClick={ () => setState(true) } className="border-4 border-indigo-500">年齡大到小</button>
      <button onClick={ () => setState(false) }className="border-4 border-indigo-500 ml-4">年齡小到大</button>
      <hr className="my-4"/>
      <ul>
        {
          filterUsers.map((user, index) => (
            <li key={ user.email }>
              { `Name：${user.name.title}.${user.name.first } ${user.name.last}, Age：${user.dob.age}` }
            </li>
          ))
        }
      </ul>
    </div>
  )
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);

以上就是一個簡單粗略的 useMemo 介紹與使用。

後記

本文將會同步更新到我的部落格

是 Ray 不是 Array