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

我已经使用该应用在其他android设备上进行了测试，它们的行为均相同。

并使用componentDidMount也可以正常工作。

Answer 1

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

React：Android应用程序Webview上的useEffect性能问题？

1 个答案: