React状态管理深度实战：从Context到Zustand的架构演进与性能优化

一、Context API深度解析与性能优化

(1) 高性能Context模式实现

import React, { createContext, useContext, useMemo, useCallback, useRef } from 'react';
/**
* 创建高性能Context的工厂函数
* 解决Context值变化导致的不必要重渲染问题
*/
function createOptimizedContext(displayName) {
const Context = createContext();
Context.displayName = displayName;
const Provider = ({ children, value }) => {
// 使用ref缓存value，避免不必要的更新
const valueRef = useRef(value);
const subscribersRef = useRef(new Set());
// 深度比较value，只有真正变化时才更新
const hasChanged = useMemo(() => {
if (valueRef.current === value) return false;
// 简单对象比较逻辑
const oldValue = valueRef.current;
const newValue = value;
if (typeof oldValue !== 'object' || typeof newValue !== 'object') {
return oldValue !== newValue;
}
const oldKeys = Object.keys(oldValue);
const newKeys = Object.keys(newValue);
if (oldKeys.length !== newKeys.length) return true;
return oldKeys.some(key => oldValue[key] !== newValue[key]);
}, [value]);
// 只有值真正变化时才更新context
const contextValue = useMemo(() => {
if (hasChanged) {
valueRef.current = value;
// 通知所有订阅者
subscribersRef.current.forEach(callback => callback());
}
return {
getState: () => valueRef.current,
subscribe: (callback) => {
subscribersRef.current.add(callback);
return () => subscribersRef.current.delete(callback);
}
};
}, [hasChanged]);
return React.createElement(Context.Provider, { value: contextValue }, children);
};
const useStore = (selector = state => state) => {
const contextValue = useContext(Context);
if (!contextValue) {
throw new Error(`useStore must be used within ${displayName}Provider`);
}
const [, forceUpdate] = React.useReducer(c => c + 1, 0);
const selectorRef = useRef(selector);
const stateRef = useRef(selector(contextValue.getState()));
// 订阅状态变化
React.useEffect(() => {
const checkForUpdates = () => {
const newState = selectorRef.current(contextValue.getState());
// 浅比较选中的状态，避免不必要的重渲染
if (newState !== stateRef.current) {
stateRef.current = newState;
forceUpdate();
}
};
const unsubscribe = contextValue.subscribe(checkForUpdates);
return unsubscribe;
}, [contextValue]);
return stateRef.current;
};
const useStoreActions = () => {
const contextValue = useContext(Context);
return contextValue?.getState().actions;
};
return {
Provider,
useStore,
useStoreActions,
Context
};
}
/**
* 用户管理Context示例
*/
const { Provider: UserProvider, useStore: useUserStore, useStoreActions: useUserActions } = createOptimizedContext('User');
// 用户状态管理
const useUserState = () => {
const [state, setState] = React.useState({
users: [],
currentUser: null,
loading: false,
error: null,
filters: {
search: '',
role: 'all',
status: 'active'
},
pagination: {
page: 1,
pageSize: 10,
total: 0
}
});
const actions = useMemo(() => ({
// 用户操作
setUsers: (users) => setState(prev => ({ ...prev, users })),
setCurrentUser: (user) => setState(prev => ({ ...prev, currentUser: user })),
setLoading: (loading) => setState(prev => ({ ...prev, loading })),
setError: (error) => setState(prev => ({ ...prev, error })),
// 过滤器操作
setSearch: (search) => setState(prev => ({
...prev,
filters: { ...prev.filters, search },
pagination: { ...prev.pagination, page: 1 }
})),
setRoleFilter: (role) => setState(prev => ({
...prev,
filters: { ...prev.filters, role },
pagination: { ...prev.pagination, page: 1 }
})),
// 分页操作
setPage: (page) => setState(prev => ({ ...prev, pagination: { ...prev.pagination, page } })),
setPageSize: (pageSize) => setState(prev => ({ 
...prev, 
pagination: { ...prev.pagination, pageSize, page: 1 } 
})),
// 批量操作
updateUser: (userId, updates) => setState(prev => ({
...prev,
users: prev.users.map(user => 
user.id === userId ? { ...user, ...updates } : user
)
})),
deleteUser: (userId) => setState(prev => ({
...prev,
users: prev.users.filter(user => user.id !== userId)
}))
}), []);
const value = useMemo(() => ({ ...state, actions }), [state, actions]);
return value;
};
/**
* 用户列表组件 - 只订阅需要的状态
*/
const UserList = () => {
// 只订阅users和loading状态，避免其他状态变化导致重渲染
const { users, loading } = useUserStore(state => ({
users: state.users,
loading: state.loading
}));
const actions = useUserActions();
console.log('UserList rendered');
if (loading) {
return <div className="loading">加载中...</div>;
}
return (
<div className="user-list">
{users.map(user => (
<UserListItem 
key={user.id} 
user={user} 
onUpdate={(updates) => actions.updateUser(user.id, updates)}
onDelete={() => actions.deleteUser(user.id)}
/>
))}
</div>
);
};
/**
* 用户列表项 - 使用React.memo避免不必要的重渲染
*/
const UserListItem = React.memo(({ user, onUpdate, onDelete }) => {
console.log(`UserListItem ${user.id} rendered`);
return (
<div className="user-item">
<span>{user.name}</span>
<span>{user.email}</span>
<span>{user.role}</span>
<button onClick={() => onUpdate({ role: 'admin' })}>设为管理员</button>
<button onClick={onDelete}>删除</button>
</div>
);
});
/**
* 搜索过滤器组件 - 只订阅filters状态
*/
const UserFilter = () => {
const { search, role } = useUserStore(state => state.filters);
const actions = useUserActions();
console.log('UserFilter rendered');
return (
<div className="user-filter">
<input
type="text"
placeholder="搜索用户..."
value={search}
onChange={(e) => actions.setSearch(e.target.value)}
/>
<select 
value={role} 
onChange={(e) => actions.setRoleFilter(e.target.value)}
>
<option value="all">所有角色</option>
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select>
</div>
);
};
/**
* 分页组件 - 只订阅pagination状态
*/
const UserPagination = () => {
const { page, pageSize, total } = useUserStore(state => state.pagination);
const actions = useUserActions();
console.log('UserPagination rendered');
const totalPages = Math.ceil(total / pageSize);
return (
<div className="pagination">
<button 
disabled={page <= 1}
onClick={() => actions.setPage(page - 1)}
>
上一页
</button>
<span>第 {page} 页，共 {totalPages} 页</span>
<button 
disabled={page >= totalPages}
onClick={() => actions.setPage(page + 1)}
>
下一页
</button>
<select 
value={pageSize} 
onChange={(e) => actions.setPageSize(Number(e.target.value))}
>
<option value="10">10条/页</option>
<option value="20">20条/页</option>
<option value="50">50条/页</option>
</select>
</div>
);
};
/**
* 应用根组件
*/
const UserManagementApp = () => {
const userState = useUserState();
return (
<UserProvider value={userState}>
<div className="user-management-app">
<h1>用户管理系统</h1>
<UserFilter />
<UserList />
<UserPagination />
</div>
</UserProvider>
);
};
export default UserManagementApp;

二、Zustand轻量级状态管理实战

(1) 生产级Zustand Store架构

import { create } from 'zustand';
import { devtools, persist, subscribeWithSelector } from 'zustand/middleware';
import { immer } from 'zustand/middleware/immer';
/**
* 创建增强型Zustand Store的工厂函数
*/
const createEnhancedStore = (name, initialState, actionsCreator, options = {}) => {
const {
persist: persistOptions,
devtools: devtoolsOptions = true,
immer: useImmer = true
} = options;
// 基础store创建函数
let storeCreator = (set, get, api) => ({
...initialState,
...actionsCreator(set, get, api)
});
// 应用中间件
if (useImmer) {
storeCreator = immer(storeCreator);
}
if (devtoolsOptions) {
storeCreator = devtools(storeCreator, { 
name, 
...(typeof devtoolsOptions === 'object' ? devtoolsOptions : {}) 
});
}
if (persistOptions) {
storeCreator = persist(storeCreator, {
name: `persist-${name}`,
...persistOptions
});
}
storeCreator = subscribeWithSelector(storeCreator);
return create(storeCreator);
};
/**
* 异步操作增强中间件
*/
const withAsyncActions = (storeCreator) => (set, get, api) => {
const baseStore = storeCreator(set, get, api);
// 增强set方法，支持异步状态更新
const enhancedSet = (updater, replace = false) => {
if (typeof updater === 'function') {
set(updater, replace);
} else {
set(updater, replace);
}
};
// 创建异步action包装器
const createAsyncAction = (actionName, asyncFn) => {
return async (...args) => {
try {
// 设置loading状态
set({ loading: true, error: null });
// 执行异步操作
const result = await asyncFn(...args, { set: enhancedSet, get });
// 清除loading状态
set({ loading: false });
return result;
} catch (error) {
// 设置错误状态
set({ 
loading: false, 
error: error.message 
});
throw error;
}
};
};
return {
...baseStore,
createAsyncAction,
set: enhancedSet
};
};
/**
* 用户管理Store - 生产级实现
*/
const useUserStore = createEnhancedStore(
'UserStore',
// 初始状态
{
users: [],
currentUser: null,
loading: false,
error: null,
filters: {
search: '',
role: 'all',
status: 'active'
},
pagination: {
page: 1,
pageSize: 10,
total: 0
},
// 缓存相关
cache: {
lastFetched: null,
cacheKey: null
}
},
// Action创建器
(set, get) => ({
// 同步Actions
setUsers: (users) => set({ users }),
setCurrentUser: (user) => set({ currentUser: user }),
setLoading: (loading) => set({ loading }),
setError: (error) => set({ error }),
// 过滤器Actions
setSearch: (search) => set(state => ({
filters: { ...state.filters, search },
pagination: { ...state.pagination, page: 1 }
})),
setRoleFilter: (role) => set(state => ({
filters: { ...state.filters, role },
pagination: { ...state.pagination, page: 1 }
})),
// 分页Actions
setPage: (page) => set({ pagination: { ...get().pagination, page } }),
setPageSize: (pageSize) => set({ 
pagination: { ...get().pagination, pageSize, page: 1 } 
}),
// 批量操作
updateUser: (userId, updates) => set(state => ({
users: state.users.map(user => 
user.id === userId ? { ...user, ...updates } : user
)
})),
deleteUser: (userId) => set(state => ({
users: state.users.filter(user => user.id !== userId),
pagination: { ...state.pagination, total: state.pagination.total - 1 }
})),
// 重置状态
reset: () => set({
users: [],
currentUser: null,
loading: false,
error: null,
filters: {
search: '',
role: 'all',
status: 'active'
},
pagination: {
page: 1,
pageSize: 10,
total: 0
}
})
}),
// 配置选项
{
persist: {
partialize: (state) => ({
filters: state.filters,
pagination: state.pagination
}),
version: 1
},
devtools: true,
immer: true
}
);
// 添加异步Actions
const useUserStoreWithAsync = () => {
const store = useUserStore();
const { createAsyncAction } = store;
// 异步获取用户列表
const fetchUsers = createAsyncAction('fetchUsers', async (params, { set, get }) => {
const { filters, pagination } = get();
const queryParams = new URLSearchParams({
...filters,
page: pagination.page,
limit: pagination.pageSize
}).toString();
const response = await fetch(`/api/users?${queryParams}`);
if (!response.ok) {
throw new Error('获取用户列表失败');
}
const data = await response.json();
set({
users: data.users,
pagination: { ...pagination, total: data.total },
cache: {
lastFetched: Date.now(),
cacheKey: queryParams
}
});
return data;
});
// 异步创建用户
const createUser = createAsyncAction('createUser', async (userData, { set, get }) => {
const response = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData)
});
if (!response.ok) {
throw new Error('创建用户失败');
}
const newUser = await response.json();
set(state => ({
users: [...state.users, newUser],
pagination: { ...state.pagination, total: state.pagination.total + 1 }
}));
return newUser;
});
return {
...store,
fetchUsers,
createUser
};
};
/**
* Store选择器Hooks - 优化重渲染
*/
export const useUsers = () => useUserStore(state => state.users);
export const useUserFilters = () => useUserStore(state => state.filters);
export const useUserPagination = () => useUserStore(state => state.pagination);
export const useUserLoading = () => useUserStore(state => state.loading);
export const useUserError = () => useUserStore(state => state.error);
/**
* 派生状态Selector
*/
export const useFilteredUsers = () => {
const users = useUsers();
const filters = useUserFilters();
return useUserStore(
state => {
const { search, role, status } = state.filters;
return state.users.filter(user => {
const matchesSearch = !search || 
user.name.toLowerCase().includes(search.toLowerCase()) ||
user.email.toLowerCase().includes(search.toLowerCase());
const matchesRole = role === 'all' || user.role === role;
const matchesStatus = status === 'all' || user.status === status;
return matchesSearch && matchesRole && matchesStatus;
});
},
// 自定义相等性检查
(oldUsers, newUsers) => {
if (oldUsers.length !== newUsers.length) return false;
return oldUsers.every((user, index) => user.id === newUsers[index].id);
}
);
};
/**
* 使用Zustand Store的组件示例
*/
const UserManagementWithZustand = () => {
const { fetchUsers, createUser, setSearch, setRoleFilter, setPage } = useUserStoreWithAsync();
const users = useFilteredUsers();
const loading = useUserLoading();
const error = useUserError();
const filters = useUserFilters();
const pagination = useUserPagination();
React.useEffect(() => {
fetchUsers();
}, [filters, pagination.page]);
const handleCreateUser = async () => {
try {
await createUser({
name: '新用户',
email: 'newuser@example.com',
role: 'user'
});
} catch (err) {
console.error('创建用户失败:', err);
}
};
if (error) {
return <div className="error">错误: {error}</div>;
}
return (
<div className="user-management">
<div className="toolbar">
<input
type="text"
placeholder="搜索用户..."
value={filters.search}
onChange={(e) => setSearch(e.target.value)}
/>
<select 
value={filters.role} 
onChange={(e) => setRoleFilter(e.target.value)}
>
<option value="all">所有角色</option>
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select>
<button onClick={handleCreateUser} disabled={loading}>
{loading ? '创建中...' : '创建用户'}
</button>
</div>
{loading && <div className="loading">加载中...</div>}
<div className="user-list">
{users.map(user => (
<UserCard key={user.id} user={user} />
))}
</div>
<Pagination />
</div>
);
};
const UserCard = React.memo(({ user }) => {
const updateUser = useUserStore(state => state.updateUser);
return (
<div className="user-card">
<h3>{user.name}</h3>
<p>{user.email}</p>
<span className={`role ${user.role}`}>{user.role}</span>
<button onClick={() => updateUser(user.id, { role: 'admin' })}>
设为管理员
</button>
</div>
);
});
const Pagination = () => {
const { page, total, pageSize } = useUserPagination();
const setPage = useUserStore(state => state.setPage);
const totalPages = Math.ceil(total / pageSize);
return (
<div className="pagination">
<button disabled={page <= 1} onClick={() => setPage(page - 1)}>
上一页
</button>
<span>第 {page} 页，共 {totalPages} 页</span>
<button disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
下一页
</button>
</div>
);
};
export default UserManagementWithZustand;

三、Redux Toolkit现代用法实战

(1) 类型安全的Redux Toolkit架构

import { createSlice, createAsyncThunk, configureStore } from '@reduxjs/toolkit';
import { useSelector, useDispatch, TypedUseSelectorHook } from 'react-redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
/**
* 用户相关类型定义
*/
interface User {
id: string;
name: string;
email: string;
role: 'admin' | 'user';
status: 'active' | 'inactive';
createdAt: string;
}
interface UserFilters {
search: string;
role: 'all' | 'admin' | 'user';
status: 'all' | 'active' | 'inactive';
}
interface Pagination {
page: number;
pageSize: number;
total: number;
}
interface UserState {
users: User[];
currentUser: User | null;
loading: boolean;
error: string | null;
filters: UserFilters;
pagination: Pagination;
cache: {
lastFetched: number | null;
cacheKey: string | null;
};
}
/**
* 异步Thunk Actions
*/
export const fetchUsers = createAsyncThunk(
'users/fetchUsers',
async (_, { getState, rejectWithValue }) => {
try {
const state = getState() as { users: UserState };
const { filters, pagination } = state.users;
const queryParams = new URLSearchParams({
...filters,
page: pagination.page.toString(),
limit: pagination.pageSize.toString()
}).toString();
const response = await fetch(`/api/users?${queryParams}`);
if (!response.ok) {
throw new Error('获取用户列表失败');
}
const data = await response.json();
return data;
} catch (error) {
return rejectWithValue(error.message);
}
}
);
export const createUser = createAsyncThunk(
'users/createUser',
async (userData: Omit<User, 'id' | 'createdAt'>, { rejectWithValue }) => {
try {
const response = await fetch('/api/users', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData)
});
if (!response.ok) {
throw new Error('创建用户失败');
}
return await response.json();
} catch (error) {
return rejectWithValue(error.message);
}
}
);
export const updateUser = createAsyncThunk(
'users/updateUser',
async ({ id, updates }: { id: string; updates: Partial<User> }, { rejectWithValue }) => {
try {
const response = await fetch(`/api/users/${id}`, {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(updates)
});
if (!response.ok) {
throw new Error('更新用户失败');
}
return await response.json();
} catch (error) {
return rejectWithValue(error.message);
}
}
);
/**
* User Slice
*/
const userSlice = createSlice({
name: 'users',
initialState: {
users: [],
currentUser: null,
loading: false,
error: null,
filters: {
search: '',
role: 'all',
status: 'active'
},
pagination: {
page: 1,
pageSize: 10,
total: 0
},
cache: {
lastFetched: null,
cacheKey: null
}
} as UserState,
reducers: {
// 同步Actions
setSearch: (state, action: { payload: string }) => {
state.filters.search = action.payload;
state.pagination.page = 1; // 重置到第一页
},
setRoleFilter: (state, action: { payload: UserFilters['role'] }) => {
state.filters.role = action.payload;
state.pagination.page = 1;
},
setStatusFilter: (state, action: { payload: UserFilters['status'] }) => {
state.filters.status = action.payload;
state.pagination.page = 1;
},
setPage: (state, action: { payload: number }) => {
state.pagination.page = action.payload;
},
setPageSize: (state, action: { payload: number }) => {
state.pagination.pageSize = action.payload;
state.pagination.page = 1;
},
setCurrentUser: (state, action: { payload: User | null }) => {
state.currentUser = action.payload;
},
clearError: (state) => {
state.error = null;
},
resetFilters: (state) => {
state.filters = {
search: '',
role: 'all',
status: 'active'
};
state.pagination.page = 1;
}
},
extraReducers: (builder) => {
// fetchUsers
builder
.addCase(fetchUsers.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(fetchUsers.fulfilled, (state, action) => {
state.loading = false;
state.users = action.payload.users;
state.pagination.total = action.payload.total;
state.cache = {
lastFetched: Date.now(),
cacheKey: JSON.stringify(state.filters)
};
})
.addCase(fetchUsers.rejected, (state, action) => {
state.loading = false;
state.error = action.payload as string;
})
// createUser
.addCase(createUser.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(createUser.fulfilled, (state, action) => {
state.loading = false;
state.users.push(action.payload);
state.pagination.total += 1;
})
.addCase(createUser.rejected, (state, action) => {
state.loading = false;
state.error = action.payload as string;
})
// updateUser
.addCase(updateUser.fulfilled, (state, action) => {
const index = state.users.findIndex(user => user.id === action.payload.id);
if (index !== -1) {
state.users[index] = action.payload;
}
if (state.currentUser?.id === action.payload.id) {
state.currentUser = action.payload;
}
});
}
});
export const {
setSearch,
setRoleFilter,
setStatusFilter,
setPage,
setPageSize,
setCurrentUser,
clearError,
resetFilters
} = userSlice.actions;
/**
* Selectors
*/
export const selectUsers = (state: { users: UserState }) => state.users.users;
export const selectUserFilters = (state: { users: UserState }) => state.users.filters;
export const selectUserPagination = (state: { users: UserState }) => state.users.pagination;
export const selectUserLoading = (state: { users: UserState }) => state.users.loading;
export const selectUserError = (state: { users: UserState }) => state.users.error;
export const selectCurrentUser = (state: { users: UserState }) => state.users.currentUser;
// 派生Selector - 过滤用户
export const selectFilteredUsers = createSelector(
[selectUsers, selectUserFilters],
(users, filters) => {
const { search, role, status } = filters;
return users.filter(user => {
const matchesSearch = !search || 
user.name.toLowerCase().includes(search.toLowerCase()) ||
user.email.toLowerCase().includes(search.toLowerCase());
const matchesRole = role === 'all' || user.role === role;
const matchesStatus = status === 'all' || user.status === status;
return matchesSearch && matchesRole && matchesStatus;
});
}
);
// 派生Selector - 分页用户
export const selectPaginatedUsers = createSelector(
[selectFilteredUsers, selectUserPagination],
(users, pagination) => {
const startIndex = (pagination.page - 1) * pagination.pageSize;
const endIndex = startIndex + pagination.pageSize;
return users.slice(startIndex, endIndex);
}
);
/**
* Store配置
*/
const persistConfig = {
key: 'users',
storage,
whitelist: ['filters', 'pagination'] // 只持久化这些字段
};
const persistedUserReducer = persistReducer(persistConfig, userSlice.reducer);
export const store = configureStore({
reducer: {
users: persistedUserReducer
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: {
ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE']
}
})
});
export const persistor = persistStore(store);
/**
* 类型化的Hooks
*/
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
/**
* 自定义Hooks - 优化使用体验
*/
export const useUsers = () => useAppSelector(selectUsers);
export const useUserFilters = () => useAppSelector(selectUserFilters);
export const useUserPagination = () => useAppSelector(selectUserPagination);
export const useUserLoading = () => useAppSelector(selectUserLoading);
export const useUserError = () => useAppSelector(selectUserError);
export const useFilteredUsers = () => useAppSelector(selectFilteredUsers);
export const usePaginatedUsers = () => useAppSelector(selectPaginatedUsers);
/**
* Action Hooks
*/
export const useUserActions = () => {
const dispatch = useAppDispatch();
return {
setSearch: (search: string) => dispatch(setSearch(search)),
setRoleFilter: (role: UserFilters['role']) => dispatch(setRoleFilter(role)),
setStatusFilter: (status: UserFilters['status']) => dispatch(setStatusFilter(status)),
setPage: (page: number) => dispatch(setPage(page)),
setPageSize: (pageSize: number) => dispatch(setPageSize(pageSize)),
setCurrentUser: (user: User | null) => dispatch(setCurrentUser(user)),
clearError: () => dispatch(clearError()),
resetFilters: () => dispatch(resetFilters()),
fetchUsers: () => dispatch(fetchUsers()),
createUser: (userData: Omit<User, 'id' | 'createdAt'>) => dispatch(createUser(userData)),
updateUser: (id: string, updates: Partial<User>) => dispatch(updateUser({ id, updates }))
};
};
/**
* 使用Redux Toolkit的组件示例
*/
const UserManagementWithRTK = () => {
const users = usePaginatedUsers();
const loading = useUserLoading();
const error = useUserError();
const filters = useUserFilters();
const pagination = useUserPagination();
const actions = useUserActions();
React.useEffect(() => {
actions.fetchUsers();
}, [filters, pagination.page, actions]);
const handleCreateUser = async () => {
try {
await actions.createUser({
name: '新用户',
email: 'newuser@example.com',
role: 'user',
status: 'active'
});
} catch (err) {
console.error('创建用户失败:', err);
}
};
if (error) {
return (
<div className="error">
错误: {error}
<button onClick={actions.clearError}>清除错误</button>
</div>
);
}
return (
<div className="user-management">
<div className="toolbar">
<input
type="text"
placeholder="搜索用户..."
value={filters.search}
onChange={(e) => actions.setSearch(e.target.value)}
/>
<select 
value={filters.role} 
onChange={(e) => actions.setRoleFilter(e.target.value as UserFilters['role'])}
>
<option value="all">所有角色</option>
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select>
<button onClick={handleCreateUser} disabled={loading}>
{loading ? '创建中...' : '创建用户'}
</button>
<button onClick={actions.resetFilters}>重置筛选</button>
</div>
{loading && <div className="loading">加载中...</div>}
<div className="user-list">
{users.map(user => (
<UserCardRTK key={user.id} user={user} />
))}
</div>
<PaginationRTK />
</div>
);
};
const UserCardRTK = React.memo(({ user }: { user: User }) => {
const actions = useUserActions();
return (
<div className="user-card">
<h3>{user.name}</h3>
<p>{user.email}</p>
<span className={`role ${user.role}`}>{user.role}</span>
<button onClick={() => actions.updateUser(user.id, { role: 'admin' })}>
设为管理员
</button>
</div>
);
});
const PaginationRTK = () => {
const { page, total, pageSize } = useUserPagination();
const setPage = useUserActions().setPage;
const totalPages = Math.ceil(total / pageSize);
return (
<div className="pagination">
<button disabled={page <= 1} onClick={() => setPage(page - 1)}>
上一页
</button>
<span>第 {page} 页，共 {totalPages} 页</span>
<button disabled={page >= totalPages} onClick={() => setPage(page + 1)}>
下一页
</button>
</div>
);
};
export default UserManagementWithRTK;

四、状态管理架构选择指南

(1) 技术选型决策矩阵

/**
* React状态管理方案选型指南
*/
const StateManagementDecisionMatrix = {
// 简单场景 - 组件内状态
useState: {
complexity: '低',
bundleSize: '0kb',
learningCurve: '低',
useCases: [
'简单的组件内部状态',
'表单输入状态',
'UI切换状态',
'计数器等简单逻辑'
],
codeExample: `
const [count, setCount] = useState(0);
const [name, setName] = useState('');
`
},
// 中等复杂度 - Context API
useContext: {
complexity: '中',
bundleSize: '0kb',
learningCurve: '中',
useCases: [
'主题切换',
'用户认证状态',
'多语言国际化',
'简单的全局UI状态'
],
pros: [
'React内置，无需额外依赖',
'学习成本相对较低',
'适合中等复杂度的状态共享'
],
cons: [
'性能问题需要手动优化',
'容易导致不必要的重渲染',
'不适合高频更新的状态'
],
codeExample: `
const ThemeContext = createContext();
const useTheme = () => useContext(ThemeContext);
`
},
// 轻量级方案 - Zustand
zustand: {
complexity: '中低',
bundleSize: '1.5kb',
learningCurve: '低',
useCases: [
'中小型应用全局状态',
'需要持久化的状态',
'快速原型开发',
'替代Redux的轻量方案'
],
pros: [
'极简API，学习成本低',
'优秀的TypeScript支持',
'内置性能优化',
'支持中间件和持久化'
],
cons: [
'社区生态相对较小',
'大型团队协作可能需要规范'
],
codeExample: `
const useStore = create((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 }))
}));
`
},
// 企业级方案 - Redux Toolkit
reduxToolkit: {
complexity: '中高',
bundleSize: '10kb+',
learningCurve: '中高',
useCases: [
'大型复杂应用',
'需要强类型支持',
'团队协作开发',
'需要时间旅行调试'
],
pros: [
'强大的开发者工具',
'优秀的TypeScript支持',
'丰富的中间件生态',
'时间旅行调试能力'
],
cons: [
'相对较大的包体积',
'学习曲线较陡峭',
'需要较多的模板代码'
],
codeExample: `
const slice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: state => { state.value += 1 }
}
});
`
},
// 服务端状态 - React Query / SWR
reactQuery: {
complexity: '中',
bundleSize: '12kb',
learningCurve: '中',
useCases: [
'服务端状态管理',
'API数据缓存',
'后台同步',
'分页和无限加载'
],
pros: [
'强大的缓存策略',
'自动重试和错误处理',
'后台数据同步',
'分页和无限加载支持'
],
cons: [
'专注于服务端状态',
'需要配合客户端状态管理',
'学习曲线中等'
],
codeExample: `
const { data, isLoading } = useQuery({
queryKey: ['users'],
queryFn: fetchUsers
});
`
}
};
/**
* 状态管理选型决策树
*/
export const StateManagementDecisionTree = ({ requirements }) => {
const {
projectSize,
teamSize,
typeScript,
performanceNeeds,
debuggingNeeds,
learningCurve
} = requirements;
let recommendation = 'useState';
if (projectSize === 'large' || teamSize === 'large') {
if (typeScript && debuggingNeeds) {
recommendation = 'reduxToolkit';
} else {
recommendation = 'zustand';
}
} else if (projectSize === 'medium') {
if (performanceNeeds === 'high') {
recommendation = 'zustand';
} else {
recommendation = 'useContext';
}
}
return (
<div className="decision-tree">
<h3>推荐方案: {recommendation}</h3>
<p>{StateManagementDecisionMatrix[recommendation].useCases.join(', ')}</p>
</div>
);
};
/**
* 混合状态管理架构示例
*/
export const HybridStateManagement = () => {
// 1. 本地UI状态 - useState
const [isModalOpen, setIsModalOpen] = useState(false);
const [inputValue, setInputValue] = useState('');
// 2. 全局UI状态 - Zustand (轻量)
const theme = useThemeStore(state => state.theme);
const sidebarCollapsed = useUIStore(state => state.sidebarCollapsed);
// 3. 业务状态 - Redux Toolkit (强类型)
const user = useAppSelector(selectCurrentUser);
const products = useAppSelector(selectProducts);
// 4. 服务端状态 - React Query
const { data: orders, isLoading } = useOrders();
const { mutate: createOrder } = useCreateOrder();
return (
<div className={`app ${theme}`}>
{/* 应用界面 */}
</div>
);
};
export default StateManagementDecisionMatrix;

总结

React状态管理的选择应该基于项目规模、团队经验和具体需求。从简单的useState到复杂的Redux Toolkit，每种方案都有其适用场景。关键是根据实际情况选择最合适的工具，并遵循最佳实践来保证代码的可维护性和性能。

核心选择策略：

1. 简单场景：useState + useContext
2. 中型项目：Zustand + React Query
3. 大型应用：Redux Toolkit + React Query
4. 混合架构：根据状态类型选择不同方案

性能优化要点：

1. 精确更新：使用选择器避免不必要的重渲染
2. 状态归一化：保持状态扁平化
3. 记忆化：合理使用useMemo和useCallback
4. 代码分割：按需加载状态管理逻辑

【进阶方向】
探索状态机（XState）在复杂状态逻辑中的应用、原子状态管理（Jotai）的编译时优化，以及状态管理在微前端架构中的最佳实践。