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

Question

我的例子如下：

我有一个按钮，单击时会显示 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。

Answer 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