如何优雅结合React状态与布尔值控制Banner展示

我在React应用中实现了一个可关闭的Banner，并通过localStorage持久化其显示状态，代码如下：

const [bannerShown, setBannerShown] = useState(true);

useEffect(() => {
  const data = localStorage.getItem('MY_APP_STATE');

  if (data !== null) {
    setBannerShown(JSON.parse(data));
  }
}, []);

useEffect(() => {
  localStorage.setItem('MY_APP_STATE', JSON.stringify(bannerShown));
}, [bannerShown]);

{bannerShown && (<MyBanner onClick={() => setBannerShown(false)} />)}

目前该功能运行正常，现在我想新增一个条件：仅当URL包含指定查询参数foo=bar时才展示这个Banner，已有的查询参数判断代码如下：

import queryString from 'query-string';

const queryParams = queryString.parse(location.search);

const hasQueryParam = queryString
    .stringify(queryParams)
    .includes('foo=bar');

请问如何以简洁优雅的方式将上述React状态与hasQueryParam布尔值结合起来？

核心思路 #

只有同时满足URL包含foo=bar查询参数和localStorage中Banner未被标记为关闭两个条件时，才渲染Banner。以下是简洁高效的实现方式：

优化后的完整代码 #

import { useState, useEffect } from 'react';
import queryString from 'query-string';
import MyBanner from './MyBanner';

function YourComponent() {
  const [bannerShown, setBannerShown] = useState(true);
  // 直接判断查询参数，替代序列化后查找的冗余逻辑
  const queryParams = queryString.parse(window.location.search);
  const hasRequiredQuery = queryParams.foo === 'bar';

  // 仅当查询参数存在时，从localStorage恢复Banner状态
  useEffect(() => {
    if (hasRequiredQuery) {
      const savedBannerState = localStorage.getItem('MY_APP_STATE');
      if (savedBannerState) {
        setBannerShown(JSON.parse(savedBannerState));
      }
    }
  }, [hasRequiredQuery]);

  // 仅当查询参数存在时，持久化Banner的关闭状态
  useEffect(() => {
    if (hasRequiredQuery) {
      localStorage.setItem('MY_APP_STATE', JSON.stringify(bannerShown));
    }
  }, [bannerShown, hasRequiredQuery]);

  // 双重条件控制Banner渲染
  return (
    <>
      {hasRequiredQuery && bannerShown && (
        <MyBanner onClick={() => setBannerShown(false)} />
      )}
      {/* 页面其他内容 */}
    </>
  );
}

export default YourComponent;

关键优化说明 #

1. 简化查询参数判断：直接通过queryParams.foo === 'bar'验证条件，比序列化后查找字符串更高效，逻辑也更直观。
2. 条件化存储操作：只有当URL满足参数要求时，才进行localStorage的读写操作，避免在无关场景下产生无效的存储行为。
3. 清晰的渲染控制：在JSX中通过双重布尔判断明确控制Banner的显示状态，代码可读性强，维护成本低。

内容的提问来源于stack exchange，提问作者meez