把WEB UI分立為一個個帶狀態(tài)的 V，是一個概念革命，因為開發(fā)者工作時看到的變量語句函數(shù)，就像建筑工人上班時看到的是水泥沙石鋼筋，這是一種低層次的作業(yè)水平。

把SPA看成一個個V，就像把建筑看一個個獨立的生活空間，而不是水泥鋼筋。所以學(xué)習(xí)造V 和Vx，就像學(xué)習(xí)造生活空間。我們工作處理的是水泥鋼筋，變量語句，心中指引我們的，是生活空間，和V邏輯。

EM：把一座大廈建筑比較一個SPA，大廈的「功能空間」比作會話，具體「生活空間」比作會話步驟，是非常相似的。

前一文，我們學(xué)習(xí)了如何使用React 提供的最基本的 V制作工具—— Component 基類——制作帶狀態(tài)的V組件（主要使用 Component.setState API），本文將介紹React 最新V制作技術(shù)——Hook來 完成同一個任務(wù) 。本文部分內(nèi)容摘自《 How To Manage State with Hooks on React Components 》。

React Hook是什么技術(shù)

React Hook 的設(shè)計可以概括為一個句話，就是 讓開發(fā)V組件更輕便，是對之前Component基類工具的一次革新。讓開發(fā)V組件更輕便 體現(xiàn)在多個方面，本文「實現(xiàn)帶本地狀態(tài)的V」的useSate 和 useReducer 只是其中之一，是最基礎(chǔ)的V功能。因為我們還要開發(fā) 提供豐富交互功能UI組件，這些復(fù)雜UI組件（Vx）需要復(fù)雜的狀態(tài)控制，React提供了useEffect 和 useContext等種類Hook的支持。

為function 組件“勾選”功能

Hook 宣稱 讓你在不使用class的情況下編寫全能的V組件——通過給 function 靈活“勾選”所需要的功能。然而，function本身只是一個無狀態(tài)的類對象，讓它“勾選”了狀態(tài)功能后就是一個完整的對象object了：

函數(shù)本身可是一個只有方法的對象，是一個沒狀態(tài)的特殊對象，引入外功能，就是指將它轉(zhuǎn)為一個特殊的有狀態(tài)或其它功能的對象，不經(jīng)過類實例化的輕便對象

這種方式還是很聰明 的。除此外還引入了一定的抽象，便利了開發(fā)。

useXXX抽象

技術(shù)上，Hook 是React提供的一個非常特殊的庫功能，從它的特定使用規(guī)則就知道。例如，它必須在固定的地方按一定的順序（必是function組件語法頂層）上使用。

另外，Hook就是為制作V Vx提供的更方便的 抽象 工具，useXXX 就是在邏輯上：

你的計算任務(wù)想要什么東西，我直接給你，你不用管了

# 兩種基礎(chǔ)的狀態(tài) Hook 工具

React Hook 提供四個主要 Hook功能 給開發(fā)者“勾選”：

• useState
• useReducer
• useEffect
• useContext

本文實例只介紹了幫助開發(fā)一類基本V（獨立的私有狀態(tài)的V）的兩個功能Hook。

EM：我喜歡研究React Hook 提供的API，來總結(jié) 實際應(yīng)用 V的種類

useState 與 簡單私有狀態(tài)的V組件

useState 用來開發(fā)最基本的V組件，包括簡單的無記憶計算（例如加法計算器），和簡單的記憶計算（例如開關(guān)按鍵）。

useReducer 與 復(fù)雜私有狀態(tài)的V組件

useState 和 useReducer 都是用來開發(fā)獨立的私有狀態(tài)的V，然而，useReducer 針對的具有更繁復(fù)業(yè)務(wù)邏輯的V組件；這繁復(fù)性，可以通過「useReducer的API使用」了解得到。

useReducer的API非常類似 Redux的工作模式，增加一個中間 Reducer 進行解耦。交互輸入執(zhí)行的是一個 action 對象（而不是直接調(diào)用狀態(tài)更新邏輯），Reducer再根據(jù)action的具體目標進行相應(yīng)的狀態(tài)更新。

useEffect 與 松散形式的Vx組件

useEffect是用于制作具有松散形式的Vx組件，就是V的狀態(tài)不完全是私有的，要與其它組件進行共享協(xié)作，使用部分數(shù)據(jù)從網(wǎng)絡(luò)上獲取。

useContext 與 復(fù)合Vx組件樹

useContext 用于制作樹層次結(jié)構(gòu)Vx組件，方便父子V之間共享數(shù)據(jù)進行協(xié)作，具體略。

# 任務(wù)與需求

我們先回顧一下前一文的任務(wù)或需求，就是， 我們制作的是什么樣的V或SPA程序。

我們制作的程序只有一個產(chǎn)品列表頁，上面有一個購物車記錄選購的功能，用戶可將想買的商品添加上 購物車，當(dāng)然也可刪除錯選的商品項，用戶能看到每次選購到的商品，以及總消費金額。

EM：這個技術(shù)實例用作教學(xué)不是特別的優(yōu)質(zhì)

useState 與 簡單 本地V狀態(tài)

import React, { useState } from 'react';

const currencyOptions = {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}

function getTotal(total) {
  return total.toLocaleString(undefined, currencyOptions)
}

export default function Product() {
  const [cart, setCart] = useState([]);  //<--
  const [total, setTotal] = useState(0); //<--

  function add() {
    setCart(['ice cream']);
    setTotal(5);
  }

  return(
    <div className="wrapper">
      <div>
        Shopping Cart: {cart.length} total items.
      </div>
      <div>Total: {getTotal(total)}</div>

      <div className="product"><span role="img" aria-label="ice cream">:icecream:</span></div>
      <button onClick={add}>Add</button>
      <button
        onClick={() => {
          setCart([]);
          setTotal(0);
        }}
      >
        Remove
      </button>
    </div>
  )
}

這個交互V的功能非常的簡單：

• 輸入：添加 或 刪除 一薦商品記錄
• 輸出：顯示選購商品數(shù)目，和總消費價格

技術(shù)，Product函數(shù)“勾了”兩個狀態(tài)變量：cart and total。

useReducer 與 繁復(fù)業(yè)務(wù)邏輯的本地V狀態(tài)

import React, { useReducer } from 'react';
import './Product.css';

const currencyOptions = {
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
}

function getTotal(cart) {
  const total = cart.reduce((totalCost, item) => totalCost + item.price, 0);
  return total.toLocaleString(undefined, currencyOptions)
}

...

function cartReducer(state, action) {
  switch(action.type) {
    case 'add':
      return [...state, action.product];
    case 'remove':
      const productIndex = state.findIndex(item => item.name === action.product.name);
      if(productIndex < 0) {
        return state;
      }
      const update = [...state];
      update.splice(productIndex, 1)
      return update
    default:
      return state;
  }
}

export default function Product() {
  const [cart, setCart] = useReducer(cartReducer, []);

  function add(product) {
    setCart({ product, type: 'add' });
  }

  function remove(product) {
    setCart({ product, type: 'remove' });
  }

  return(
    <div className="wrapper">
      <div>
        Shopping Cart: {cart.length} total items.
      </div>
      <div>Total: {getTotal(cart)}</div>

      <div>
        {products.map(product => (
          <div key={product.name}>
            <div className="product">
              <span role="img" aria-label={product.name}>{product.emoji}</span>
            </div>
            <button onClick={() => add(product)}>Add</button>
            <button onClick={() => remove(product)}>Remove</button>
          </div>
        ))}
      </div>
    </div>
  )
}

這個交互V的功能其實也很簡單，沒有充分展現(xiàn)useReducer的特色。

.