reactjs - 性能观察者不与 react 路线变化一起工作

Question

我正在使用性能观察者 API，它在原始 route 工作，但不适用于更改我尝试了很多不同的方法，但无法让它工作。

原路线

import React, { useEffect, Component } from 'react';
import ContextState from './context_state_config';
import history from './utils/history';
import ReactGA from 'react-ga';
import './App.css'

ReactGA.initialize('');




var observer = new PerformanceObserver(list => {
    list.getEntries().forEach(entry => {
      // Display each reported measurement on console
      if (console) {
        console.log(entry);
      }
    })
  });
  observer.observe({entryTypes: [
                                  'navigation',
                                  // 'paint',
                                  // 'resource',
                                  // 'mark',
                                  // 'measure',
                                  // 'frame',
                                  // 'longtask'
                                ]})


history.listen((location) => {

    let observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
          // Display each reported measurement on console
            console.log('ffff');
        })
      });
    observer.observe({entryTypes: [
                                    'navigation',
                                    'paint',
                                    // 'resource',
                                    // 'mark',
                                    // 'measure',
                                    // 'frame',
                                    // 'longtask'
                                  ]});
});


const App = () => {

    return(
      <div className="App">
        React
        <ContextState />
      </div>
    )
}

export default App;

另一条路线:

import React, { useContext, useState, useReducer, useEffect } from 'react';
import * as ACTIONS from '../store/actions/actions';
import * as FormReducer from '../store/reducers/form_reducer';
import Context from '../utils/context';
//
// var observer = new PerformanceObserver(list => {
//     list.getEntries().forEach(entry => {
//       // Display each reported measurement on console
//       if (console) {
//         console.log(entry);
//       }
//     })
//   });
//   observer.observe({entryTypes: [
//                                   'navigation',
//                                   'paint',
//                                   // 'resource',
//                                   // 'mark',
//                                   // 'measure',
//                                   // 'frame',
//                                   // 'longtask'
//                                 ]});

const HooksForm1 = () => {
  useEffect(() =>{
    let observer = new PerformanceObserver(list => {
        list.getEntries().forEach(entry => {
          // Display each reported measurement on console
          console.log(entry);
        })
      })
    observer.observe({entryTypes: ['paint']})
  }, [])
  const context = useContext(Context)
...

正如所提到的，当我最初在第一次加载时加载页面时，它的工作原理，但是当我进行路由更改时，控制台上没有任何内容打印。

我希望它在每次页面更改时自动运行。

当我加载到不是原始 app.js 页面的另一个页面时，它也可以工作。

例如，我直接进入/hooks 表单路由并重新加载页面。重新加载页面后，导航计时 api 打印了正确的结果，但它仍然无法处理后续页面更改。

Answer 1

抱歉大家，这是我的错误，但上面发布的代码确实有效。

我的问题是我测试了错误的条目:导航和绘制。这两个条目只应该在初始页面加载时工作，因为 React 是一个单页面应用程序。

第一次油漆确实意味着第一次油漆

在测试了标记和测量等其他条目后，它按预期工作。