( 今天的文章要寫React的相關問題，完全沒有寫過React的人，建議從中文官方文件開始練習。)

React與其他JS框架有個很大的特色，
就是將會重複使用的程式碼包裝成元件(Component)，以便往後專案的維護。

以往React的元件都常都會寫成class的形式，
在React 16.8後以後(2021/3 更新至 v17.0.2)，增加了React Hooks的功能。

React Hooks

Hook 是對 React 概念：props、state、context、refs 以及 lifecycle，提供了一個更直接的 API。

以往撰寫成Class的形式，有一些實作上的缺陷，而Hook的功能帶來了一些改善:

1. 更方便重複使用Stateful的邏輯

過去React沒有辦法把可重用的行為「附加(attach)」到一個元件上，
每當需要使用Stateful的邏輯，都必須重新去建構元件，
且如果是被包裹成非常多層的元件，會更不方便進行重構。

Hook 能在不改變 component 階層的情況下重用 stateful 的邏輯。(也就是後文示範的useState)

2. 使元件邏輯更易於理解

基於原先React元件依照lifecycle方法進行拆分，
不相關的邏輯可能會被強迫放在同一個生命週期裡。
也基於stateful邏輯不能重複使用的關係，原來的元件架構會更複雜，
使用State函式庫集中管理可能也不夠直觀。

Hook 能把一個 component 拆分成更小的 function，讓元件之間的邏輯關係更清晰。

3. Hook 不依賴 class 就能使用更多 React 的功能。

使用class寫法必須多加注意this的指向，或是綁定(bind)event handler。
雖然基礎好的人可能沒有這些困擾QQ。但考慮到React在概念上比起Class，其實更接近Function，
官方還是提供了Hook這種更便於學習和使用的形式。

useState

以React Hooks中的State Hook為例，Hook本身是指函式(function)，
useState用於在每次輸入、資料更動時，重新渲染畫面。

基本語法:

 const [input, setValue] = useState("");

input是一個變數，而setValue是一個函式，
useState("")裡的(小括號)會是input的初始值，範例的初始值為空""

而如果要使用State Hook，必須先從modules引入useState

import React, { useState } from 'react';

這裡借用codepen的useState模板進行解說(擷取重點程式碼)，

先嘗試幫input設值:

import React, { useState } from 'react';

const App = () => {

const [input, setValue] = useState("");  // input初始值為空

 handleInput = (event) => {
    setValue(event.target.value);  // 設值的方法，可以想成input = event.target.value;
  }
  
  return(
  ...
  <input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
  // value設為input，每次輸入值改變(onChange)就執行handleInput函式。
  )
  
  ReactDOM.render(<App />,
document.getElementById("root"))

到這裡，可以確認每次State跟著input改變。

然後繼續執行渲染:

const App = () => {
  
  const [input, setValue] = useState("");
  const [name, setName] = useState('User');  // name的初始值為'User'
  
  handleInput = (event) => {
    setValue(event.target.value);
  }
  
  updateName = (event) => { 
    event.preventDefault();
    setName(input);  // name = input
    setValue("");  // input = "", 將輸入框設為空
  }
  
 return(
      ...
      <h1>
        Hello, <span>{name}!</span>   //顯示name的值
      </h1>
      ...    
      <input type="text" value={input} name="name-1" onChange={handleInput} class="input"/>
      ...
      <button onClick={updateName} class="button is-dark">Save</button>
      // 每次按按鈕(onClick)執行updateName()
      ...
  )
  
  ReactDOM.render(<App />,
document.getElementById("root"))

到這裡可以完成一個輸入到渲染畫面的簡易輸入框!

Codepen完整範例程式碼

提問

• 用過 React Hooks 嗎？它要解決什麼問題？

1. Hook 能在不改變 component 階層的情況下重用 stateful 的邏輯。
2. 依照lifecycle方法進行拆分的程式碼，邏輯容易混亂。Hook 能把一個元件拆分成更小的 function，因此能依照邏輯關係建構元件，使程式碼更易讀。
3. class不便於理解和學習，Hook 不依賴 class 就能使用更多 React 的功能。

【如內文有誤還請不吝指教>< 並感謝閱覽至此的各位:D 】

參考資料
-介紹 Hook

---正文結束---