React组件返回值变更未重渲染：useRef使用异常求助

在父组件中使用useRef() Hook跟踪用户是否首次访问着陆页，将该Hook传入子组件后，用于决定为div应用两个CSS类中的哪一个，之后更新该Hook以标记非首次访问。相关代码如下：

父组件代码：

function RootComponent() {
  const firstLanding = useRef(true);
  return (
    <div>
      <BrowserRouter>
        <Route exact path='/'>
          <Welcome firstLanding={firstLanding} />
        </Route>
        ... other routes
      </BrowserRouter>
    </div>
  );
}

子组件代码：

function Welcome(props) {
  var classUsed;

  if (props.firstLanding.current) {
    classUsed = "firstLandingClass";
    props.firstLanding.current = false;
  }
  else {
    classUsed = "normalClass";
  }
  
  console.log("Class used: " + classUsed);
  
  return (
    <div className={classUsed}>
      Content!
    </div>
  )
}

预期逻辑应正常运行，但首次访问站点时，控制台日志显示“Class used: firstLandingClass”，但浏览器检查发现div实际应用的是normalClass，同时组件未按预期重渲染。

1. 开发环境严格模式的重复渲染：React在开发环境的严格模式下，会重复调用组件渲染函数来检测非纯函数的副作用。第一次调用Welcome时，firstLanding.current为true，classUsed被设为firstLandingClass，同时current被改为false；第二次调用时，current已经是false，classUsed变成normalClass，最终DOM会采用第二次渲染的结果。如果控制台日志只显示了第一次的输出，就会出现日志与实际样式类不符的情况。
2. 渲染阶段的非法副作用：直接在组件渲染逻辑中修改props传入的ref.current，违反了React渲染函数必须是纯函数的规则，这会导致渲染行为不可预测。
3. useRef的特性限制：useRef的current属性更新不会触发组件重渲染，但这不是本次问题的核心，核心是严格模式下的重复执行导致最终DOM使用了修改后的状态。

方案一：会话级状态（刷新页面后重置） #

使用useState管理状态，遵循React状态更新规范，避免在渲染阶段产生副作用：

function RootComponent() {
  const [isFirstLanding, setIsFirstLanding] = useState(true);
  return (
    <div>
      <BrowserRouter>
        <Route exact path='/'>
          <Welcome 
            isFirstLanding={isFirstLanding} 
            setIsFirstLanding={setIsFirstLanding} 
          />
        </Route>
        {/* 其他路由 */}
      </BrowserRouter>
    </div>
  );
}

function Welcome({ isFirstLanding, setIsFirstLanding }) {
  // 仅在首次加载时标记为非首次访问
  useEffect(() => {
    if (isFirstLanding) {
      setIsFirstLanding(false);
    }
  }, [isFirstLanding, setIsFirstLanding]);

  const classUsed = isFirstLanding ? "firstLandingClass" : "normalClass";
  
  console.log("Class used: " + classUsed);
  
  return (
    <div className={classUsed}>
      Content!
    </div>
  );
}

该方案中，useState的更新会触发组件重渲染，确保状态变更后UI同步更新，同时通过useEffect将状态修改逻辑移到渲染阶段之外，符合React的规则。

方案二：持久化状态（刷新页面后仍保留） #

结合useState和localStorage，实现跨会话的首次访问标记，即使用户刷新页面也能保持状态：

function Welcome() {
  // 初始化时一次性判断并标记首次访问
  const [classUsed, setClassUsed] = useState(() => {
    const hasVisited = localStorage.getItem('hasVisited') === 'true';
    if (!hasVisited) {
      localStorage.setItem('hasVisited', 'true');
      return 'firstLandingClass';
    }
    return 'normalClass';
  });

  console.log("Class used: " + classUsed);
  
  return (
    <div className={classUsed}>
      Content!
    </div>
  );
}

该方案中，useState的初始化函数仅在组件首次挂载时执行一次，直接根据localStorage的记录决定样式类，同时完成首次访问的标记，不会触发额外重渲染，逻辑更简洁高效，适合需要持久化首次访问状态的场景。

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