0

我的示例如下：

我有一个按钮，单击时显示图像（通过从 useReducer 调度的状态更改）持续 400 毫秒。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。

4

1 回答 1

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

于 2020-12-22T16:24:35.303 回答