useState和useContext深度解析

React Hooks 徹底改變了React組件的狀態(tài)管理和功能復(fù)用方式，使得函數(shù)組件也能擁有類(lèi)組件的功能。

useState：函數(shù)組件的狀態(tài)管理

簡(jiǎn)介：

useState是React中最基礎(chǔ)的Hook，它允許我們?cè)诤瘮?shù)組件中添加狀態(tài)。useState是React提供的一個(gè)內(nèi)置Hook，用于在函數(shù)組件中添加局部狀態(tài)。它接受一個(gè)初始值作為參數(shù)，返回一個(gè)數(shù)組，數(shù)組的第一個(gè)元素是當(dāng)前狀態(tài)，第二個(gè)元素是一個(gè)更新?tīng)顟B(tài)的函數(shù)。

import React, { useState } from 'react';

function Example() {
  // 初始化狀態(tài)count為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 函數(shù)用于更新?tīng)顟B(tài)。每次調(diào)用 setCount 時(shí)，React會(huì)重新渲染組件，并根據(jù)新的狀態(tài)值重新生成虛擬DOM，然后進(jìn)行高效的DOM diff，最終更新實(shí)際DOM。

深入理解

useState的工作原理，狀態(tài)更新的異步性及其對(duì)性能的影響。

• 狀態(tài)更新是異步的，這意味著在同一個(gè)事件循環(huán)中多次調(diào)用 setCount，React只會(huì)使用最后一次的值。
• useState 不支持復(fù)雜對(duì)象的淺比較，如果需要基于前一個(gè)狀態(tài)更新?tīng)顟B(tài)，可以使用函數(shù)形式的 setCount，例如 setCount(prevCount => prevCount + 1)。

進(jìn)階應(yīng)用

結(jié)合useEffect處理副作用，如數(shù)據(jù)獲取與清理。

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

function Example() {
  // 初始化狀態(tài)
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 數(shù)據(jù)獲取函數(shù)
  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監(jiān)聽(tīng)data的變化，首次渲染時(shí)執(zhí)行
  useEffect(() => {
    fetchData();
  }, []);

  // 渲染UI
  if (loading) {
    return <div>Loading...</div>;
  }

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

  return (
    <div>
      <h1>Data Retrieved Successfully</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default Example;

代碼示例解讀：首先使用 useState 創(chuàng)建了三個(gè)狀態(tài)變量：data 存儲(chǔ)獲取的數(shù)據(jù)，loading 表示數(shù)據(jù)是否正在加載，error 存儲(chǔ)任何可能出現(xiàn)的錯(cuò)誤信息。

然后，我們定義了一個(gè) fetchData 函數(shù)，用于異步獲取數(shù)據(jù)。這個(gè)函數(shù)中包含了錯(cuò)誤處理和狀態(tài)更新邏輯。

接著，我們使用 useEffect 來(lái)執(zhí)行數(shù)據(jù)獲取。useEffect 的第二個(gè)參數(shù)是一個(gè)依賴(lài)數(shù)組，這里傳入空數(shù)組意味著只在組件掛載后執(zhí)行一次，即首次渲染時(shí)獲取數(shù)據(jù)。這樣可以確保在組件加載時(shí)獲取數(shù)據(jù)，而不是在每次狀態(tài)更新時(shí)都重新獲取。

在 useEffect 的回調(diào)函數(shù)中，我們調(diào)用 fetchData 函數(shù)。由于 fetchData 改變了 data、loading 和 error 的值，所以不需要將這些狀態(tài)變量添加到依賴(lài)數(shù)組中，因?yàn)樗鼈兊淖兓瘯?huì)觸發(fā)組件的重新渲染，從而自動(dòng)執(zhí)行新的數(shù)據(jù)獲取。

useContext：共享狀態(tài)的上下文解決方案

簡(jiǎn)介

useContext用于跨組件傳遞數(shù)據(jù)，無(wú)需顯式傳遞props。

首先，我們需要?jiǎng)?chuàng)建一個(gè)Context：

import React from 'react';

const ThemeContext = React.createContext('light');

然后在組件中使用 useContext：

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function Button() {
  const theme = useContext(ThemeContext);
  
  return (
    <button style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>
      {theme === 'dark' ? 'Dark' : 'Light'}
    </button>
  );
}

深入理解

• 使用 useContext的組件會(huì)在提供者（Provider）更新時(shí)重新渲染，即使該組件的其他狀態(tài)沒(méi)有變化。
• 如果多個(gè)組件訂閱同一個(gè)Context，它們都會(huì)在提供者狀態(tài)改變時(shí)重新渲染，可能導(dǎo)致不必要的性能開(kāi)銷(xiāo)?？梢酝ㄟ^(guò)React.memo或shouldComponentUpdate等策略?xún)?yōu)化。
• 為了防止濫用，只在需要跨多個(gè)層級(jí)共享狀態(tài)時(shí)使用Context，否則應(yīng)優(yōu)先考慮props傳遞。

useState與useContext的組合應(yīng)用

結(jié)合 useState 和useContext，我們可以創(chuàng)建一個(gè)帶有主題切換功能的計(jì)數(shù)器應(yīng)用：

import React, { createContext, useState, useContext } from 'react';

// 創(chuàng)建ThemeContext
const ThemeContext = createContext('light');

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={theme}>
      {children}
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
    </ThemeContext.Provider>
  );
}

function Counter() {
  const theme = useContext(ThemeContext);
  const [count, setCount] = useState(0);

  return (
    <div style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>
        Click me ({theme})
      </button>
    </div>
  );
}

function App() {
  return (
    <ThemeProvider>
      <Counter />
    </ThemeProvider>
  );
}

export default App;

代碼示例解讀：ThemeProvider 使用 useState 管理主題狀態(tài)，Counter 組件通過(guò) useContext 訂閱主題，同時(shí)使用 useState 管理計(jì)數(shù)器狀態(tài)。當(dāng)主題切換時(shí)，Counter 會(huì)重新渲染，顯示對(duì)應(yīng)主題的顏色。

2500G計(jì)算機(jī)高級(jí)架構(gòu)師速成資料超級(jí)大禮包免費(fèi)送！