React 状态更改并不总是适用于移动网络

Posted 2023-02-19

【中文标题】React 状态更改并不总是适用于移动网络

【英文标题】：React state changes do not always work on mobile web

【发布时间】：2021-04-01 08:19:14

【问题描述】：

我的例子如下：

我有一个按钮，单击时会显示 400 毫秒的图像（通过从 useReducer 调度的状态更改）。 400 毫秒后，图像再次隐藏，按钮可见。在桌面浏览器上，这工作得很好。但在移动设备上存在性能问题。图像并不总是在点击时显示。请看下面的 GIF 动画来理解：

这是我的源代码：

  const initialState = 
    shouldObserve: false,
  ;
  
  function reducer(state, action) 
    switch (action.type) 
      case "observe":
        return  shouldObserve: true ;
      case "reset":
        return initialState;
      default:
        throw new Error();
    
  

  const [state, dispatch] = useReducer(reducer, initialState);
  
  useEffect(() => 
    // Prevent calling useEffect at first Render
    if (firstUpdate.current) 
      firstUpdate.current = false;
      return;
    

    const  shouldObserve  = state;
    if (shouldObserve) 
      setTimeout(() => 
        dispatch( type: "reset" );
      , TIME_TO_OBSERVE);
    
  , [state]);

GIF 动画：

在桌面上（运行良好）：

在移动设备上（并不总是显示图像）：

有什么方法可以保证图像 100%（始终）显示？

关于我的堆栈的更多信息： 我使用 Expo 开发适用于 ios、android 和 Web 的应用程序。 Web 版本的输出是 React Native Web，因此这里使用内部的 React。

【参考方案1】：

不妨试试这样的：

import React,  useEffect, useState  from "react";
import "./styles.css";

export default function App() 
  const [show, setShow] = useState(false);

  useEffect(() => 
    const timer = setTimeout(() => 
      setShow(false);
    , 200);
    return () => clearInterval(timer);
  , [show]);

  return (
    <div className="App">
      <div onClick=() => setShow(true)>
        show ? <div>image</div> : <div>start</div>
      </div>
    </div>
  );

这是一个用于测试的代码沙箱：https://codesandbox.io/s/nervous-khorana-l903t?file=/src/App.js:0-461

【讨论】：

不幸的是，我看不到任何改进。您的源代码是在此处切换 2 个 div。您可以尝试切换图像和 div 吗？如果我切换文本和按钮，它会像预期的那样工作，但不是图像组件

会做一秒。

@realarb 我已经在 div 的位置插入了一个图像，它似乎工作得很好。

请问您是如何加载图像的？我目前正在 ios 模拟器上对其进行测试，它可以按预期工作。

我正在使用 Expo，并使用 expo-asset 中的 useAssets 预加载我的图像。这是一个普通的 React Native Image 组件