iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
自我挑戰組

React自我學習心得30天~系列 第 27

Dat27 Hook概觀介紹

經過昨天對Hook有個初步的認識之後,下方介紹幾個Hook的範例。

Hook 的規則

  • 建議只在最上層呼叫 Hook。不在迴圈、判斷式、或是function 中呼叫 Hook。
  • 除去客製化Hook之外,只在 React function component中呼叫 Hook。不要在一般JavaScript function中呼叫 Hook。

State Hook

下面用計時器作介紹

import React, { useState } from 'react';

function Example() {
  // 宣告一個新的 state 變數,名字叫做「count」,類似於class中的
  // this.state = {
      count: 0
    };
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState:回傳目前state數值(count)和一個更新state數值的function(setCount)。
state裡面可以放字串、物件、陣列,且state可以拆成多個useState(),或是全部塞在同一個useState()裡面。

function ExampleWithManyStates() {
  // 宣告多個 state 變數!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

Effect Hook

Effect(副作用)從字面上可以解釋為除了主要作用之外,所產生出的額外作用。用JS的表達式作例子的話,會變動原本的變數的值的話,便稱作帶副作用的表達式。如counter++、x += 3等。
Hook中useEffect便是帶有副作用的function,會依據每次變數的變化,刷新useEffect裡面的function,下面的計時器例子中便是在每次點擊按鈕時除了刷新點擊次數外,瀏覽器的titlt也會不斷刷新。

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 每次點擊時更新文件標題
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

上一篇
Day26 了解Hook
下一篇
Day28 客製化Hook
系列文
React自我學習心得30天~30

尚未有邦友留言

立即登入留言