反应:在Android应用程序网页视图上使用影响性能问题

Question

我正在使用useEffect钩子 API 使用 React 构建一个网页

但是当我在客户端的 Android 应用程序的 Web 视图中打开页面时，在第一次渲染调用和 useEffect 调用之间总是需要超过 5000 毫秒的时间。

这是我的代码：

import React, { useEffect, useState, useRef } from 'react';
import axios from 'axios';

const api = {
  ins: axios.create({
    baseURL: 'https://new.h5no1.com/apg-great-china-3/api'
  })
};
function App() {
  const [data, setData] = useState();
  const t = useRef(Date.now());
  useEffect(() => {
    console.log(Date.now() - t.current); // 5000+, useLayoutEffect log 30~50 only
    api.ins
      .post('/user/is_on_list', {
        openid: 'xxx',
        openToken: 'xxx'
      })
      .then(res => {
        setData(JSON.stringify(res.data))
      });
  }, []);
  return <div className="App">{data ? data : 'loading'}</div>;
}
export default App;

当我更改为使用useLayoutEffect时，它工作正常，问题是，我不知道为什么使用useEffect会导致这里出现问题，而只是使用它从 web api 获取数据？

我从应用程序的 Web 视图中获得的 UA 字符串

Mozilla/5.0 (Linux; Android 9; MI 8 Lite Build/PKQ1.181007.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/72.0.3626.121 Mobile Safari/537.36 PARS/50601

我已经使用该应用程序在其他安卓设备上进行了测试，它们的行为都相同。

使用componentDidMount也可以正常工作。

Answer 1

useLayoutEffect在执行方面是componentDidMount的同义词。最简单的情况如下所示：render => useLayoutEffect(componentDidMount ( => animationFrame => useEffect。这基本上意味着，如果您在渲染或布局效果中有一些阻塞执行，那么useEffect将被延迟。这是反应行为，而不是特定于安卓的行为。