React Hooks实战：从useState到useContext深度解析

useState和useContext深度解析

React Hooks 彻底改变了React组件的状态管理和功能复用方式，使得函数组件也能拥有类组件的功能。

useState：函数组件的状态管理

简介：

useState是React中最基础的Hook，它允许我们在函数组件中添加状态。useState是React提供的一个内置Hook，用于在函数组件中添加局部状态。它接受一个初始值作为参数，返回一个数组，数组的第一个元素是当前状态，第二个元素是一个更新状态的函数。

import React, { useState } from 'react';

function Example() {
  // 初始化状态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 函数用于更新状态。每次调用 setCount 时，React会重新渲染组件，并根据新的状态值重新生成虚拟DOM，然后进行高效的DOM diff，最终更新实际DOM。

深入理解

useState的工作原理，状态更新的异步性及其对性能的影响。

• 状态更新是异步的，这意味着在同一个事件循环中多次调用 setCount，React只会使用最后一次的值。
• useState 不支持复杂对象的浅比较，如果需要基于前一个状态更新状态，可以使用函数形式的 setCount，例如 setCount(prevCount => prevCount + 1)。

进阶应用

结合useEffect处理副作用，如数据获取与清理。

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

function Example() {
  // 初始化状态
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // 数据获取函数
  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监听data的变化，首次渲染时执行
  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 创建了三个状态变量：data 存储获取的数据，loading 表示数据是否正在加载，error 存储任何可能出现的错误信息。

然后，我们定义了一个 fetchData 函数，用于异步获取数据。这个函数中包含了错误处理和状态更新逻辑。

接着，我们使用 useEffect 来执行数据获取。useEffect 的第二个参数是一个依赖数组，这里传入空数组意味着只在组件挂载后执行一次，即首次渲染时获取数据。这样可以确保在组件加载时获取数据，而不是在每次状态更新时都重新获取。

在 useEffect 的回调函数中，我们调用 fetchData 函数。由于 fetchData 改变了 data、loading 和 error 的值，所以不需要将这些状态变量添加到依赖数组中，因为它们的变化会触发组件的重新渲染，从而自动执行新的数据获取。

useContext：共享状态的上下文解决方案

简介

useContext用于跨组件传递数据，无需显式传递props。

首先，我们需要创建一个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的组件会在提供者（Provider）更新时重新渲染，即使该组件的其他状态没有变化。
• 如果多个组件订阅同一个Context，它们都会在提供者状态改变时重新渲染，可能导致不必要的性能开销。可以通过React.memo或shouldComponentUpdate等策略优化。
• 为了防止滥用，只在需要跨多个层级共享状态时使用Context，否则应优先考虑props传递。

useState与useContext的组合应用

结合 useState 和useContext，我们可以创建一个带有主题切换功能的计数器应用：

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

// 创建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 管理主题状态，Counter 组件通过 useContext 订阅主题，同时使用 useState 管理计数器状态。当主题切换时，Counter 会重新渲染，显示对应主题的颜色。