如何在 React 中使用 useEffect 持久化按钮背景色状态

本文介绍如何利用 useEffect 与 localStorage 配合，实现用户切换页面后仍保留心愿单按钮（如“已收藏”状态）的背景色，确保 ui 状态跨会话一致。

本文介绍如何利用 `useeffect` 与 `localstorage` 配合，实现用户切换页面后仍保留心愿单按钮（如“已收藏”状态）的背景色，确保 ui 状态跨会话一致。

在 react 应用中，组件状态（如 useState 管理的 background）默认是瞬时的——页面刷新或路由跳转后即丢失。若需持久化用户交互产生的视觉状态（例如心愿单按钮从橙色变为黑色以表示“已添加”），必须将其同步至客户端存储。localStorage 是最轻量、兼容性最佳的选择，而 useEffect 则是执行副作用（如读写存储）的标准 Hook。

以下是关键实现步骤：

1. 初始化状态时从 localStorage 读取
   使用 localStorage.getItem() 获取上次保存的值，并转换为布尔值作为初始状态：

   const [background, setBackground] = useState(   localStorage.getItem('wishlistBackground') === 'black' );

2. 使用 useEffect 同步状态变更
   每当 background 变化时，自动更新 localStorage，确保数据与 UI 严格一致：

   useEffect(() => {   localStorage.setItem('wishlistBackground', background ? 'black' : 'orange'); }, [background]);

3. 完整整合到组件中（精简示例）
   注意：实际项目中建议将逻辑封装为自定义 Hook（如 useLocalStorage），但此处保持清晰可读：

   import { useState, useEffect } from 'react'; import { useDispatch } from 'react-redux';  const Item = ({ product, img, title, price }) => {   const dispatch = useDispatch();   // ✅ 从 localStorage 初始化状态   const [background, setBackground] = useState(     localStorage.getItem('wishlistBackground') === 'black'   );    // ✅ 副作用：状态变更时持久化   useEffect(() => {     localStorage.setItem('wishlistBackground', background ? 'black' : 'orange');   }, [background]);    const toggleWishlistHandler = () => {     dispatch(toggleItem(product));     setBackground(prev => !prev);   };    return (     <li className={classes.item}>       {/* ...其他 JSX */}       <div         className={`${classes.addWishlist} ${classes.icon}`}         onClick={toggleWishlistHandler}         style={{ backgroundColor: background ? 'black' : 'orange' }}       >         <i className="fa-solid fa-heart"></i>       </div>     </li>   ); };  export default Item;

⚠️ 注意事项：

• localStorage 只能存储字符串，因此读取时需显式类型转换（如 === ‘black’），写入时也应保持字符串格式；
• 若多个商品共用同一键名（如 ‘wishlistBackground’），会导致状态互相覆盖——生产环境应基于商品 ID 构建唯一键，例如：
  localStorage.getItem(wishlist_${product.id}`)`;
• 首次加载时，localStorage 未设置则返回 NULL，null === ‘black’ 为 false，安全可靠；
• 如需支持服务端渲染（SSR），需在 useEffect 内部读写（避免直接访问 window.localStorage 导致 hydration mismatch）。

通过这一模式，你不仅实现了按钮颜色的跨页面记忆，更建立了一种可复用的状态持久化范式：初始化读取 → 交互更新 → 副作用同步。这是构建用户友好、状态连贯的现代 Web 应用的基础实践。