使用 State Hook 的步驟

其實在前面文章寫過幾次 Hook ，其實動作也就三個。

• 宣告一個 State 變數
• 讀取 State
• 更新 State

import React, { useState } from 'react';

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

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

(補)宣告一個 State 使用的解構賦值

什麼是解構賦值?

解構賦值 (Destructuring assignment) 語法是一種 JavaScript 運算式，可以把陣列或物件中的資料解開擷取成為獨立變數。 - MDN

宣告 state 的寫法，console.log 回傳值如下圖

拆解出來就是下面的對照

const [state, setState] = React.useState({
    count: 0,
});

//對照
const [state, setState] = [{count: 0}, ƒ ()]

使用 Class VS State Hook

Hook 看起來稍微簡潔，也不需要寫 constructor 或 super 的結構，以及使用 this 關鍵字。

Class 範例

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }}

Hook 範例

import React, { useState } from 'react';

function Example () {
   [count, setCount] = React.useState(0)

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

使用 State Hook 宣告物件

要注意的是，在 Class 裡使用 setState 的時候，物件的值會是 merge 在一起的，只更新更新的部分。
但使用 Hook 去更新物件資料，會是完全覆蓋，所以需要連同原來的值一起傳入。以下例子跟反例 anti pattern 。

使用物件的例子

function Example () {
   [fruit, setFruit] = React.useState({
     name: 'apple',
     count: 0
   })

   return (
      <div>
        <p>{fruit.name}</p>
        <p>You clicked {fruit.count} times</p>
        <button onClick={() => setFruit({...fruit, count: fruit.count + 1})}>
          Click me
        </button>
      </div>
    );
}

//略

使用物件的反例，原本的值就會消失了。

function Example () {
   //略

   return (
      <div>
        <p>{fruit.name}</p>
        <p>You clicked {fruit.count} times</p>
        <button onClick={() => setFruit({count: fruit.count + 1})}>
          Click me
        </button>
      </div>
    );
}

//略

codepen 附完整程式碼

Stateless component，Function Component 和 Hook

在還沒有 Hook 的時候，可能會再不需要用到 state 的時候選擇使用 function component，因為不需要寫 Class 結構，這樣沒有 state 的 componennt 也叫做 Stateless component (以下舉例)，但若遇到之後要使用 state 或生命週期，就必須重新改寫成 Class。

const CoverImage = (props) => {
  return (
    <picture>
        <source srcset={props.source} >
        <img src={props.default} alt={props.alt} />
    </picture>
  );
}

以上今天。

參考資料：
https://zh-hant.reactjs.org/docs/hooks-state.html
解構賦值