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>
  );
}