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 会重新渲染，显示对应主题的颜色。
网友评论