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

优质文章学习记录

— 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

在ESP32-S3部署mimiclaw，基于deepseek并用飞书机器人开展对话-feishu

在ESP32-S3部署mimiclaw，基于deepseek并用飞书机器人开展对话-feishu

最近mimiclaw火爆，其开发团队也在密集更新，我看3天前已经可以用“飞书机器人”对话交互了。 目前网络上能查到的部署资料相对滞后，现在将飞书机器人的部署整理如下： 1. 前提 已经安装好ESP-IDF，并支持vscode编译esp32固件。 2. api-key准备 * 注册deepseek, * 创建APIkey， * 并充值，新注册的用户余额为零，无法使用 3. 飞书机器人 我是在飞书个人版中，创建的机器人。 1. 访问飞书开放平台，单击创建企业自建应用，填写应用名称和描述，选择应用图标，单击创建。 2. 左侧导航栏单击凭证与基础信息 页面，复制App ID（格式如 cli_xxx）和App Secret。 3. 配置事件订阅。 1. 在飞书开放平台左侧导航栏单击事件与回调，在事件配置页签中单击订阅方式，选择使用 长连接 接收事件，单击保存。 2. 在事件配置页面，单击添加事件，

HACS极速版：智能家居插件下载速度提升10倍的终极解决方案

还在为Home Assistant插件下载缓慢而烦恼吗？HACS极速版正是为你量身打造的解决方案！这款专为中国用户优化的HACS版本，通过智能加速技术彻底解决了国内网络环境下插件下载的难题。本指南将带你从零开始，全面掌握HACS极速版的使用技巧，让智能家居体验更加流畅高效。 【免费下载链接】integration 项目地址: https://gitcode.com/gh_mirrors/int/integration 为什么选择HACS极速版？ 常见网络痛点分析： * 官方HACS下载插件经常卡顿或失败 * 更新插件需要漫长等待 * 网络环境限制影响智能家居体验 极速版核心优势： HACS极速版利用gitmirror.com和fastgit.org等国内优质镜像服务，让插件下载速度提升数倍！无论是集成组件、前端卡片还是主题定制，都能快速完成下载安装。 快速上手：四种安装方法详解 方法一：命令行一键安装（推荐） wget -O - https://get.hacs.vip | bash - 或者使用curl命令： curl -fsSL get.hacs.

【无人机追踪】基于 0-1 整数规划实现「能耗最小」的无人机联盟选取，完成目标攻击任务的同时，让所有无人机的总能耗达到最优附Matlab代码

✅作者简介：热爱科研的Matlab仿真开发者，擅长毕业设计辅导、数学建模、数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。 🍎 往期回顾关注个人主页：Matlab科研工作室  👇 关注我领取海量matlab电子书和数学建模资料  🍊个人信条：格物致知,完整Matlab代码获取及仿真咨询内容私信。 🔥 内容介绍  一、背景 在现代军事作战或特定的工业应用场景中，常常需要多架无人机协同完成目标攻击任务。然而，无人机的能源储备有限，能耗问题成为制约其任务执行效率和持续时间的关键因素。如何在众多无人机中选取合适的无人机组成联盟，使其在成功完成目标攻击任务的同时，将所有参与无人机的总能耗控制在最优水平，是一个亟待解决的重要问题。 传统的无人机任务分配方式可能没有充分考虑能耗因素，或者只是简单地基于距离、速度等单一指标进行分配，这往往无法实现总能耗的最优控制。基于 0 - 1 整数规划的方法为解决这一问题提供了一种有效的途径，它能够综合考虑多种约束条件，精确地对无人机进行筛选和组合，以达到能耗最小化的目标。 二、原理 （一）0 - 1 整数规划基础
YOLOv8 模型移植到高通机器人RB5 平台详细指南

YOLOv8 模型移植到高通机器人RB5 平台详细指南

💡前言 随着边缘端 AI 推理需求的增长，将深度学习模型部署到嵌入式平台成为许多开发者的关注焦点。本文将详细介绍如何将 Ultralytics YOLOv8 训练后的目标检测模型移植到高通机器人RB5平台设备上运行，涵盖从 PyTorch 模型到最终部署的完整流程，并提供常见问题的解决方案和性能优化建议。除了该设备外，如果你手上是一台Thundercomm EB5平台的设备，同样可以按照该步骤完成模型训练，快尝试下吧。 1. 概述 1.1 背景介绍 本文档详细介绍如何将 Ultralytics YOLOv8 训练后的目标检测模型移植到高通机器人 RB5平台（Robotics RB5）上运行。RB5 平台是一款强大的机器人开发平台，搭载 Qualcomm QRB5165 处理器，支持 AI 加速和 5G 连接，非常适合边缘端 AI 推理任务。 1.2 模型移植流程 模型移植的完整流程如下： 1.