React Hooks 實踐：從 useState 到 useContext 的深入分析

深入分析useState和useContext

React Hooks 徹底改變了 React 元件的狀態管理和函數重複使用，讓函數元件擁有類別元件的功能。

useState：功能組件的狀態管理

介紹：

useState是React中最基本的Hook，它允許我們為功能元件新增狀態。 useState 是 React 提供的內建 Hook，用於新增本機狀態。它接受初始值作為參數並傳回一個陣列。陣列的第一個元素是目前狀態，第二個元素是更新狀態的函數。

import React, { useState } from 'react';

function Example() {
  // Initialization status count is 0
  const [count, setCount] = useState(0);

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

useState傳回的setCount函數用於更新狀態。每次呼叫 setCount 時，React 都會重新渲染元件並根據新的狀態值重新產生虛擬 DOM，然後執行高效的 DOM diff，最後更新實際 DOM。

深入了解

useState 的工作原理、狀態更新的非同步性及其對效能的影響。

• 狀態更新是非同步的，這表示如果在相同事件循環中多次呼叫 setCount，React 將只使用最後一個值。

• useState 不支援複雜物件的淺層比較。如果需要依照先前的狀態更新狀態，可以使用setCount的函數形式，如setCount(prevCount => prevCount 1).

進階應用

結合useEffect來處理副作用，例如資料擷取和清理。

import React, { useState, useEffect } from 'react';

function Example() {
  // Initialization state
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Data acquisition function
  const fetchData = async () => {
    try {
      setLoading(true);
      const response = await fetch('https://api.example.com/data');
      const json = await response.json();
      setData(json);
      setError(null);
    } catch (err) {
      setError(err.message);
      setData(null);
    } finally {
      setLoading(false);
    }
  };

  // useEffect monitors data changes and executes when rendering for the first time
  useEffect(() => {
    fetchData();
  }, []);

  // Rendering the UI
  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <h1 id="Data-Retrieved-Successfully">Data Retrieved Successfully</h1>
      <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}