前端状态管理：别让你的状态变成一团乱麻

优质文章学习记录

— 6 min read

前端状态管理：别让你的状态变成一团乱麻

毒舌时刻

这状态管理得跟蜘蛛网似的，谁能理得清？

各位前端同行，咱们今天聊聊前端状态管理。别告诉我你还在使用 setState 管理所有状态，那感觉就像在没有地图的情况下寻宝——能找，但累死你。

为什么你需要状态管理

最近看到一个项目，组件之间传递状态需要经过 5 层，修改一个状态要修改多个地方。我就想问：你是在做状态管理还是在做传递游戏？

反面教材

// 反面教材：混乱的状态管理 function App() { const [user, setUser] = useState(null); const [posts, setPosts] = useState([]); const [comments, setComments] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchData() { setLoading(true); try { const userResponse = await fetch('/api/user'); const userData = await userResponse.json(); setUser(userData); const postsResponse = await fetch('/api/posts'); const postsData = await postsResponse.json(); setPosts(postsData); const commentsResponse = await fetch('/api/comments'); const commentsData = await commentsResponse.json(); setComments(commentsData); } catch (error) { console.error('Error fetching data:', error); } finally { setLoading(false); } } fetchData(); }, []); return ( <div> {loading ? <div>加载中...</div> : ( <div> <UserHeader user={user} /> <PostList posts={posts} comments={comments} /> </div> )} </div> ); } function UserHeader({ user }) { return <h1>Welcome, {user?.name}</h1>; } function PostList({ posts, comments }) { return ( <div> {posts.map(post => ( <div key={post.id}> <h2>{post.title}</h2> <p>{post.content}</p> <CommentList postId={post.id} comments={comments} /> </div> ))} </div> ); } function CommentList({ postId, comments }) { const postComments = comments.filter(comment => comment.postId === postId); return ( <div> {postComments.map(comment => ( <div key={comment.id}>{comment.content}</div> ))} </div> ); }

毒舌点评：这状态管理，就像在玩传球游戏，球传来传去都不知道传到哪里了。

正确姿势

1. Redux Toolkit

// 正确姿势：Redux Toolkit // 1. 安装依赖 // npm install @reduxjs/toolkit react-redux // 2. 创建 store // store/index.js import { configureStore } from '@reduxjs/toolkit'; import userReducer from './slices/userSlice'; import postsReducer from './slices/postsSlice'; import commentsReducer from './slices/commentsSlice'; export const store = configureStore({ reducer: { user: userReducer, posts: postsReducer, comments: commentsReducer, }, }); // 3. 创建 slices // store/slices/userSlice.js import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; export const fetchUser = createAsyncThunk('user/fetchUser', async () => { const response = await fetch('/api/user'); return response.json(); }); const userSlice = createSlice({ name: 'user', initialState: { data: null, loading: false, error: null, }, reducers: {}, extraReducers: (builder) => { builder .addCase(fetchUser.pending, (state) => { state.loading = true; state.error = null; }) .addCase(fetchUser.fulfilled, (state, action) => { state.loading = false; state.data = action.payload; }) .addCase(fetchUser.rejected, (state, action) => { state.loading = false; state.error = action.error.message; }); }, }); export default userSlice.reducer; // 4. 使用 store // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { Provider } from 'react-redux'; import { store } from './store'; ReactDOM.createRoot(document.getElementById('root')).render( <Provider store={store}> <App /> </Provider> ); // 5. 使用状态 // App.jsx import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { fetchUser } from './store/slices/userSlice'; import { fetchPosts } from './store/slices/postsSlice'; import { fetchComments } from './store/slices/commentsSlice'; import UserHeader from './components/UserHeader'; import PostList from './components/PostList'; function App() { const dispatch = useDispatch(); const { loading } = useSelector((state) => state.user); useEffect(() => { dispatch(fetchUser()); dispatch(fetchPosts()); dispatch(fetchComments()); }, [dispatch]); return ( <div> {loading ? <div>加载中...</div> : ( <div> <UserHeader /> <PostList /> </div> )} </div> ); } // components/UserHeader.jsx import React from 'react'; import { useSelector } from 'react-redux'; function UserHeader() { const user = useSelector((state) => state.user.data); return <h1>Welcome, {user?.name}</h1>; } export default UserHeader; // components/PostList.jsx import React from 'react'; import { useSelector } from 'react-redux'; import CommentList from './CommentList'; function PostList() { const posts = useSelector((state) => state.posts.data); return ( <div> {posts.map(post => ( <div key={post.id}> <h2>{post.title}</h2> <p>{post.content}</p> <CommentList postId={post.id} /> </div> ))} </div> ); } export default PostList; // components/CommentList.jsx import React from 'react'; import { useSelector } from 'react-redux'; function CommentList({ postId }) { const comments = useSelector((state) => state.comments.data.filter(comment => comment.postId === postId) ); return ( <div> {comments.map(comment => ( <div key={comment.id}>{comment.content}</div> ))} </div> ); } export default CommentList;

2. Zustand

// 正确姿势：Zustand // 1. 安装依赖 // npm install zustand // 2. 创建 store // store/index.js import { create } from 'zustand'; import { persist } from 'zustand/middleware'; const useStore = create( persist( (set, get) => ({ user: null, posts: [], comments: [], loading: false, error: null, fetchUser: async () => { set({ loading: true, error: null }); try { const response = await fetch('/api/user'); const data = await response.json(); set({ user: data, loading: false }); } catch (error) { set({ error: error.message, loading: false }); } }, fetchPosts: async () => { set({ loading: true, error: null }); try { const response = await fetch('/api/posts'); const data = await response.json(); set({ posts: data, loading: false }); } catch (error) { set({ error: error.message, loading: false }); } }, fetchComments: async () => { set({ loading: true, error: null }); try { const response = await fetch('/api/comments'); const data = await response.json(); set({ comments: data, loading: false }); } catch (error) { set({ error: error.message, loading: false }); } }, }), { name: 'app-storage', } ) ); export default useStore; // 3. 使用 store // App.jsx import React, { useEffect } from 'react'; import useStore from './store'; import UserHeader from './components/UserHeader'; import PostList from './components/PostList'; function App() { const { loading, fetchUser, fetchPosts, fetchComments } = useStore(); useEffect(() => { fetchUser(); fetchPosts(); fetchComments(); }, [fetchUser, fetchPosts, fetchComments]); return ( <div> {loading ? <div>加载中...</div> : ( <div> <UserHeader /> <PostList /> </div> )} </div> ); } // components/UserHeader.jsx import React from 'react'; import useStore from '../store'; function UserHeader() { const user = useStore((state) => state.user); return <h1>Welcome, {user?.name}</h1>; } export default UserHeader; // components/PostList.jsx import React from 'react'; import useStore from '../store'; import CommentList from './CommentList'; function PostList() { const posts = useStore((state) => state.posts); return ( <div> {posts.map(post => ( <div key={post.id}> <h2>{post.title}</h2> <p>{post.content}</p> <CommentList postId={post.id} /> </div> ))} </div> ); } export default PostList; // components/CommentList.jsx import React from 'react'; import useStore from '../store'; function CommentList({ postId }) { const comments = useStore((state) => state.comments.filter(comment => comment.postId === postId) ); return ( <div> {comments.map(comment => ( <div key={comment.id}>{comment.content}</div> ))} </div> ); } export default CommentList;

3. Jotai

// 正确姿势：Jotai // 1. 安装依赖 // npm install jotai // 2. 创建 atoms // store/atoms.js import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'; import { atomWithStorage } from 'jotai/utils'; // 状态 atoms const userAtom = atomWithStorage('user', null); const postsAtom = atomWithStorage('posts', []); const commentsAtom = atomWithStorage('comments', []); const loadingAtom = atom(false); const errorAtom = atom(null); // 动作 atoms const fetchUserAtom = atom( null, async (_, set) => { set(loadingAtom, true); set(errorAtom, null); try { const response = await fetch('/api/user'); const data = await response.json(); set(userAtom, data); } catch (error) { set(errorAtom, error.message); } finally { set(loadingAtom, false); } } ); const fetchPostsAtom = atom( null, async (_, set) => { set(loadingAtom, true); set(errorAtom, null); try { const response = await fetch('/api/posts'); const data = await response.json(); set(postsAtom, data); } catch (error) { set(errorAtom, error.message); } finally { set(loadingAtom, false); } } ); const fetchCommentsAtom = atom( null, async (_, set) => { set(loadingAtom, true); set(errorAtom, null); try { const response = await fetch('/api/comments'); const data = await response.json(); set(commentsAtom, data); } catch (error) { set(errorAtom, error.message); } finally { set(loadingAtom, false); } } ); export { userAtom, postsAtom, commentsAtom, loadingAtom, errorAtom, fetchUserAtom, fetchPostsAtom, fetchCommentsAtom }; // 3. 使用 atoms // App.jsx import React, { useEffect } from 'react'; import { useAtomValue, useSetAtom } from 'jotai'; import { loadingAtom, fetchUserAtom, fetchPostsAtom, fetchCommentsAtom } from './store/atoms'; import UserHeader from './components/UserHeader'; import PostList from './components/PostList'; function App() { const loading = useAtomValue(loadingAtom); const fetchUser = useSetAtom(fetchUserAtom); const fetchPosts = useSetAtom(fetchPostsAtom); const fetchComments = useSetAtom(fetchCommentsAtom); useEffect(() => { fetchUser(); fetchPosts(); fetchComments(); }, [fetchUser, fetchPosts, fetchComments]); return ( <div> {loading ? <div>加载中...</div> : ( <div> <UserHeader /> <PostList /> </div> )} </div> ); } // components/UserHeader.jsx import React from 'react'; import { useAtomValue } from 'jotai'; import { userAtom } from '../store/atoms'; function UserHeader() { const user = useAtomValue(userAtom); return <h1>Welcome, {user?.name}</h1>; } export default UserHeader; // components/PostList.jsx import React from 'react'; import { useAtomValue } from 'jotai'; import { postsAtom } from '../store/atoms'; import CommentList from './CommentList'; function PostList() { const posts = useAtomValue(postsAtom); return ( <div> {posts.map(post => ( <div key={post.id}> <h2>{post.title}</h2> <p>{post.content}</p> <CommentList postId={post.id} /> </div> ))} </div> ); } export default PostList; // components/CommentList.jsx import React from 'react'; import { useAtomValue } from 'jotai'; import { commentsAtom } from '../store/atoms'; function CommentList({ postId }) { const comments = useAtomValue(commentsAtom); const postComments = comments.filter(comment => comment.postId === postId); return ( <div> {postComments.map(comment => ( <div key={comment.id}>{comment.content}</div> ))} </div> ); } export default CommentList;

毒舌点评：这才叫前端状态管理，集中管理状态，组件之间共享状态，再也不用担心状态传递的问题了。

Read more

宇树科技Go2机器人强化学习（RL）开发实操指南

宇树科技Go2机器人强化学习（RL）开发实操指南

在Go2机器人的RL开发中，环境配置、模型训练、效果验证与策略部署的实操步骤是核心环节。本文基于宇树科技官方文档及开源资源，以Isaac Gym和Isaac Lab两大主流仿真平台为核心，提供从环境搭建到实物部署的全流程操作步骤，覆盖关键命令与参数配置，帮助开发者快速落地RL开发。 一、基础准备：硬件与系统要求 在开始操作前，需确保硬件与系统满足RL开发的基础需求，避免后续因配置不足导致训练中断或性能瓶颈。 类别具体要求说明显卡NVIDIA RTX系列（显存≥8GB）需支持CUDA加速，Isaac Gym/Isaac Lab均依赖GPU进行仿真与训练操作系统Ubuntu 18.04/20.04/22.04推荐20.04版本，兼容性最佳，避免使用Windows系统（部分依赖不支持）显卡驱动525版本及以上需与CUDA版本匹配（如CUDA 11.3对应驱动≥465.19.01，CUDA 11.8对应驱动≥520.61.05）软件依赖Conda（

企业微信外部群“群机器人”主动推送消息实现指南

QiWe开放平台 · 开发者名片                 API驱动企微自动化，让开发更高效         核心能力：企微二次开发服务 | 多语言接入 | 免Root授权         官方站点：https://www.qiweapi.com（功能全景）         开发文档：https://doc.qiweapi.com（开发指南）         团队定位：专注企微API生态的技术服务团队        对接通道：搜「QiWe 开放平台」联系客服         核心理念：合规赋能，让企微开发更简单、更高效 在企业微信的生态开发中，针对外部群（包含微信用户的群聊）进行自动化消息推送，最稳健且合规的方式是利用群机器人（Webhook）。本文将从技术逻辑、核心步骤及注意事项三个维度，分享如何实现这一功能。 一、 实现逻辑简述 企业微信外部群机器人主要通过一个唯一的 Webhook 地址 接收标准的 HTTP POST 请求。开发者只需将构造好的

5分钟部署麦橘超然Flux，低显存设备也能玩转AI绘画

5分钟部署麦橘超然Flux，低显存设备也能玩转AI绘画 1. 为什么你值得花5分钟试试这个Flux控制台 你是不是也遇到过这些情况： * 想试试最新的Flux模型，但显卡只有8GB甚至6GB，一加载就报“CUDA out of memory”； * 下载完模型还要手动配置路径、改代码、调参数，折腾两小时还没看到一张图； * 网页版用着方便，但担心隐私泄露、生成被限速、图片被缓存； 别再纠结了——麦橘超然 - Flux 离线图像生成控制台，就是为这类真实场景而生的。它不是又一个需要编译、调参、查文档的实验项目，而是一个开箱即用的本地Web服务：模型已打包进镜像，float8量化技术让DiT主干网络显存占用直降近一半，Gradio界面简洁到连提示词输入框都标好了占位符，连SSH隧道怎么转发都给你写好了命令。 更重要的是，它真的能在你的旧笔记本、远程小内存服务器、甚至实验室里那台只配了RTX 3060的工位机上跑起来。本文不讲原理推导，不堆术语，就带你从零开始，5分钟内完成部署、打开浏览器、输入第一句描述、亲眼看到AI画出赛博朋克雨夜街道——所有操作一步接一步，复制粘贴就能
AirSim无人机仿真入门（一）：实现无人机的起飞与降落

AirSim无人机仿真入门（一）：实现无人机的起飞与降落

概述： 安装好所需要的软件和环境，通过python代码控制无人机进行起飞和降落。 参考资料： 1、知乎宁子安大佬的AirSim教程（文字教程，方便复制） 2、B站瑜瑾玉大佬的30天RL无人机仿真教程（视频教程，方便理解） 3、AirSim官方手册（资料很全，不过是纯英文的） AirSim无人机仿真入门（一）：实现无人机的起飞与降落 * 1 安装AirSim * 1.1 参考教程 * 1.2 内容梳理 * 1.3 步骤总结 * 2 开始使用 AirSim * 2.1 参考教程 * 2.2 内容梳理 * 2.3 步骤总结 * 3 撰写python控制程序 * 3.1 参考教程 * 3.2 内容梳理