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

useState和useContext深度解析

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

useState：函数组件的状态管理

简介：

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

import React, { useState } from 'react';function Example() {// 初始化状态count为0const [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();}, []);// 渲染UIif (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;