前端状态管理方案：从简单到复杂的演进

前端状态管理方案：从简单到复杂的演进

什么是状态管理？

状态管理是指在应用中管理和维护数据状态的过程。在前端应用中，状态可以分为：

状态管理方案对比

方案一：React Context + useReducer

const initialState = { count: 0 };

function reducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count – 1 };
default:
return state;
}
}

const CountContext = createContext(null);

function CountProvider({ children }) {
const [state, dispatch] = useReducer(reducer, initialState);

return (
<CountContext.Provider value={{ state, dispatch }}>
{children}
</CountContext.Provider>
);
}

方案二：Zustand

import create from 'zustand';

const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count – 1 })),
reset: () => set({ count: 0 })
}));

function Counter() {
const count = useStore((state) => state.count);
const increment = useStore((state) => state.increment);

return <button onClick={increment}>{count}</button>;
}

方案三：Redux Toolkit

import { configureStore, createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
}
}
});

export const { increment, decrement } = counterSlice.actions;

const store = configureStore({
reducer: {
counter: counterSlice.reducer
}
});

方案四：Jotai

import { atom, useAtom } from 'jotai';

const countAtom = atom(0);

function Counter() {
const [count, setCount] = useAtom(countAtom);

return (
<button onClick={() => setCount(c => c + 1)}>
{count}
</button>
);
}

方案五：Recoil

import { atom, useRecoilState } from 'recoil';

const countState = atom({
key: 'countState',
default: 0
});

function Counter() {
const [count, setCount] = useRecoilState(countState);

return (
<button onClick={() => setCount(c => c + 1)}>
{count}
</button>
);
}

方案选择指南

状态管理最佳实践

1. 状态最小化

// ❌ 不好：存储冗余状态
const [fullName, setFullName] = useState('');
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');

// ✅ 好：只存储必要状态，派生状态计算得出
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const fullName = `${firstName} ${lastName}`;

2. 状态规范化

// ❌ 不好：嵌套数据结构
const [users, setUsers] = useState([
{ id: 1, name: 'John', posts: [{ id: 1, title: 'Post 1' }] }
]);

// ✅ 好：规范化数据结构
const [users, setUsers] = useState({
byId: {
1: { id: 1, name: 'John' }
},
allIds: [1]
});
const [posts, setPosts] = useState({
byId: {
1: { id: 1, userId: 1, title: 'Post 1' }
},
allIds: [1]
});

3. 异步状态管理

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

const fetchUser = createAsyncThunk('users/fetchUser', async (userId) => {
const response = await fetch(`/api/users/${userId}`);
return response.json();
});

const usersSlice = createSlice({
name: 'users',
initialState: {
data: {},
loading: false,
error: null
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUser.pending, (state) => {
state.loading = true;
})
.addCase(fetchUser.fulfilled, (state, action) => {
state.loading = false;
state.data[action.payload.id] = action.payload;
})
.addCase(fetchUser.rejected, (state, action) => {
state.loading = false;
state.error = action.error.message;
});
}
});

4. 状态持久化

import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
key: 'root',
storage
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = configureStore({
reducer: persistedReducer
});

const persistor = persistStore(store);

状态管理模式

模式一：容器组件模式

// 容器组件
function UserContainer() {
const dispatch = useDispatch();
const user = useSelector((state) => state.user);

useEffect(() => {
dispatch(fetchUser());
}, [dispatch]);

return <UserProfile user={user} />;
}

// 展示组件
function UserProfile({ user }) {
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}

模式二：自定义 Hook 模式

function useUser() {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch('/api/user')
.then(res => res.json())
.then(data => {
setUser(data);
setLoading(false);
})
.catch(err => {
setError(err);
setLoading(false);
});
}, []);

return { user, loading, error };
}

function UserProfile() {
const { user, loading, error } = useUser();

if (loading) return <Loading />;
if (error) return <Error message={error.message} />;

return <div>{user.name}</div>;
}

性能优化

选择器优化

// ❌ 不好：每次渲染都创建新对象
const user = useSelector((state) => ({
name: state.user.name,
email: state.user.email
}));

// ✅ 好：使用 reselect 缓存结果
import { createSelector } from '@reduxjs/toolkit';

const selectUser = (state) => state.user;
const selectUserSummary = createSelector(
[selectUser],
(user) => ({
name: user.name,
email: user.email
})
);

const userSummary = useSelector(selectUserSummary);

批量更新

import { batch } from 'react-redux';

function updateMultipleThings() {
batch(() => {
dispatch(action1());
dispatch(action2());
dispatch(action3());
});
}

总结

选择合适的状态管理方案需要考虑：

无论选择哪种方案，核心原则都是：保持状态简洁、规范化数据结构、合理组织代码。