複習useState

接著前面所講的，我們將幾個常用的hook都再複習一遍，來解構基礎以外你可能沒發現的細節，那麼我們先從最基礎的 useState 來講起。

理解Proxy

有沒有想過，useState 是怎麼來更改 component 裡面的內容呢？

這其中的概念，可以參考 Javascript 裡面的 Proxy，這裡的 Proxy 指的是 Design pattern 裡面的 Proxy pattern，並不是我們常講的 Proxy server喔！Proxy 是 JavaScript 的一個內建原型，它允許你在目標對象（被代理對象）的操作上注入自定義的行為。使用 Proxy，可以在目標對象的屬性取值、賦值、函數呼叫等操作之前或之後執行自定義的處理邏輯。

那我們先來看看 Proxy 怎麼處裡的吧：

// default物件
const defaultObject = {
  name: 'Luciano',
  age: 30
};

// 透過Proxy建立以defaultObject為預設的代理物件
const proxy = new Proxy(defaultObject, {
  get(target, property, receiver) {
    console.log(`你的名字 ${property}`);
    return Reflect.get(target, property, receiver);
  },
  set(target, property, value, receiver) {
    console.log(`更改 ${property} 為 ${value}`);
    return Reflect.set(target, property, value, receiver);
  }
});

// 使用 Proxy 
console.log(proxy.name); // 觸發get輸出 "你的名字 Luciano"
proxy.age = 31; // 觸發set輸出 "更改 age 為 31"

結合virtual dom

前一篇的章節也複習了 React 的 virtual dom，要更改真實的 Dom 之前你會需要一套機制來隔離虛擬 Dom 與真實 Dom，那也就是 Proxy Pattern 代理處理的部分，我們來模擬一下 useState 的組成吧！

// 我們熟知的setState type
type StateSetter<T> = (newValue: T | ((prevValue: T) => T)) => void;

function useState<T>(initialValue: T): [T, StateSetter<T>] {
  let state: T = initialValue;
  // 這邊也可以考慮換成new Set()
  const subscribers: (() => void)[] = [];

  const setState: StateSetter<T> = (newValue: T | ((prevValue: T) => T)) => {
		// 這邊處理帶進來的是callback | value
    const updatedValue = typeof newValue === 'function' ? (newValue as (prevValue: T) => T)(state) : newValue;
    if (state !== updatedValue) {
      state = updatedValue;
      subscribers.forEach(subscriber => subscriber());
    }
  };

  const stateProxy = new Proxy({ value: state }, {
    get(target, property) {
      if (property === 'value') {
        return state;
      } else if (property === 'set') {
        return setState;
      }
    }
  });

  return [stateProxy.value, stateProxy.set];
}

let currentRender: (() => void) | null = null;
// 這裡就是react底層在處理的渲染時機，當然實際上不只一種
// 詳細的話應該等同於class component的渲染時機
// 原諒我只用最簡單的方式處理
// 有興趣的朋友可以參考solidjs作者的直播
// 我有映像他在介紹如何改善渲染時機的段落有示範如何實作底層
function render(component: () => void) {
  currentRender = component;
  if (currentRender) {
    currentRender();
    currentRender = null;
  }
}

// 使用自定義的 useState Hook
const [count, setCount] = useState(0);

function CounterComponent() {
  console.log('Rendering CounterComponent...');
  console.log(`Count: ${count}`);
  return null;
}

// 模擬組件渲染這裡的機制在 React 裡面會更加複雜一點
render(CounterComponent);

// 更新狀態
setCount(prevCount => prevCount + 1);

// 再次渲染通常應該對應的是 componentDidUpdate
render(CounterComponent);

在上面的範例中，我們使用 TypeScript 模擬了一個簡單的 useState 函數，該函數返回一個陣列，包含狀態和更新狀態的函數，另外處理了一個簡單的 render 函數，用於模擬組件的渲染。

注意:這只是一個簡化的腦補，真正的 React useState Hook 會更加複雜，涉及到更新、批量渲染、多個組件的狀態管理等等。

這裡演示 Proxy 在 useState 的角色，以及如何實現簡單的狀態管理機制。了解一點基礎了以後我們來講講面試常常會問到的問題吧！

useState 的運作是同步還是非同步？

了解了底層以後，不難回答出來他是同步的，那是什麼原因會讓人搞混他是非同步運行的呢？讓我們來看看範例吧：

const Search = () => {
  // 這裡為基本的使用情境，當使用useState的function的同時會產生一個array
  // 也就是為什麼我們常常看到範例的使用方式是長這樣了
  const [txt, setTxt] = useState('');
  const [resData, setResData] = useState([]);
  // 這裡示範一個打api的動作，但為獨立的void function
  const txtChange = (event) => {
    setTxt(event.target.value);
    fetch(`/apiUrlsForSearch?${txt}`)
    .then((res) => res.json()).then(setResData)
  }
  // 下面return的部分就是基本的做法，當input的onChange觸發時會去打api
  return (
    <div>
      <input value={txt} onChange={txtChange} />
      {resData?.map(...)}
    </div>
  )
}

以範例為例我們來模擬一下當這個component被渲染的時候的先後順序，當畫面剛進入時，會以你帶入的預設值 txt = “” & resData = [] 去渲染，所以會是空的input和空白的結果。當我們於欄位中輸入 a 的時候會觸發 txtChange function 然後透過此 function 的處理程序會先觸發了 setTxt 的 function 去更改 txt 的值為 “a”，然後我們又將 txt 的值帶入 fetch function 裡面去打 api，並將回傳結果透過 setResData function 更改寫入 resData 中。但這個時候你應該會發現 resData 的值並沒有更動。

為什麼呢？讓我們重新看一遍這個 function 的處理順序：

// ...省略
const txtChange = (event) => {
  setTxt(event.target.value);
  // 這裡如果拿的是txt那麼會拿到原本就的值，其中的原理為js的閉包
  // 並不是非同步的處理問題，也就是說你應該要改的是將txt改為event.target.value
  // 因為透過setTxt的處理會經過一段Proxy的判斷處理程序
  // 而你所取出來的setTxt又是在useState的function當中，所以這裡仍然為閉包的概念
  console.log(txt) // 這裡你應該會拿到舊的值，也就是常常會讓人搞混的地方
  fetch(`/apiUrlsForSearch?${txt}`) // 解法就是將txt改為event.target.value
    .then((res) => res.json()).then(setResData)
}
// ...

這也是我真實經歷過的問題，面試官仍舊堅持自己的觀念為正確的，並確信 useState 為非同步的處理 function，老實說他一舉這樣的例子我當下也無法解釋的那麼清楚，我只記得我肯定沒在官方文件上看到說明 useState 為非同步的解釋，只能怪自己太菜了。

那麼其實更好一點的做法應該是將 fetch function 拆出來透過 useEffect 的方式去監聽原本的 txt 就好了：

const Search = () => {
  const [txt, setTxt] = useState('');
  const [resData, setResData] = useState([]);
  useEffect(() => {
    fetch(`/apiUrlsForSearch?${txt}`)
    .then((res) => res.json()).then(setResData)
  }, [txt])
  const txtChange = (event) => {
    setTxt(event.target.value);
  }

  return (
    <div>
      <input value={txt} onChange={txtChange} />
      {resData?.map(...)}
    </div>
  )
}

結語

這樣一來當你原本的 txt 更改的同時 useEffect 就會重複觸發 fetch function的部分，當然也可以透過 debounce 的做法來降低 server 的負擔。

那麼今天的分享就到這裡，明天我們再來詳解 useEffect。

給全新手的大禮包

React基本Hook教學

參考資料

pattern電子書--proxy-pattern
solidjs Ryan Carniato直播