Реагируйте: используйте проблему с производительностью для веб-просмотра приложения Android? - PullRequest
Новая
       26

Реагируйте: используйте проблему с производительностью для веб-просмотра приложения Android?

1 голос
/ 30 мая 2019

Я создаю веб-страницу с помощью React, используя useEffect hook api

но когда я открываю страницу в веб-представлении приложения для Android моего клиента, между первым вызовом рендеринга и вызовом 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 может вызвать проблему при использовании его только для извлечения данных из веб-API?

строка 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 тоже отлично работает.

1 Ответ

0 голосов
/ 31 мая 2019

useLayoutEffect является синонимом для componentDidMount в плане исполнения. Самый простой случай выглядит следующим образом: render => useLayoutEffect (componentDidMount) => animationFrame => useEffect. В основном это означает, что если у вас есть какое-то блокирующее выполнение при рендеринге или эффекте макета, тогда useEffect будет отложено Это реагирующее поведение, а не специфичное для Android.

...