Question

我的React-Native项目上的unstable_Profiler有一个问题，它忽略了onRender回调，但仅在生产模式下有效。没有错误，一切都很好。我看了这篇文章：https://itnext.io/react-native-profiler-43d131130c5c

我在开发人员模式（react-native run-android）上测试了解决方案，并且一切正常。应用的生产版本无法正常工作。我尝试了最新版本的react和react-native，react-dom，schedule，schedule，修改.babelrc，但对我没有任何帮助。

import React, { unstable_Profiler as Profiler } from 'react';

const withProfiler = (profilerId) => (WrappedComponent) => {

  class ProfilerComponent extends React.Component {

    async logMeasurement(id, phase, actualDuration, baseDuration) {
      // see output during DEV
      console.log({id, phase, actualDuration, baseDuration});

      // also here is some logic to log durations in prod mode. (eg. logcat)
      // but it never happened. 
    }

    render() {
      return (
        <Profiler id={profilerId} onRender={this.logMeasurement}>
          <WrappedComponent {...this.props} />
        </Profiler>
      );
    }
  }

  return ProfilerComponent;
};

export default withProfiler;

.babelrc

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "react-dom$": "react-dom/profiling",
        "scheduler/tracing": "scheduler/tracing-profiling"
      }
    }]
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-remove-console",
      ]
    },
    "development": {
      "plugins": [
        "@babel/plugin-transform-react-jsx-source"
      ]
    }
  }
}

package.json

 "react": "^16.8.1",
 "react-native": "^0.57.8",
 "react-dom": "16.8.1",
 "react-art": "16.8.1",
 "schedule": "^0.4.0",
 "scheduler": "^0.13.1",

 "@babel/core": "7.1.0",
 "@babel/plugin-proposal-decorators": "^7.3.0",
 "@babel/plugin-transform-react-jsx-source": "^7.2.0",
 "@babel/preset-env": "^7.3.1",
 "@babel/register": "^7.0.0",
 "babel-core": "^7.0.0-bridge.0",
 "babel-loader": "^8.0.4",
 "babel-plugin-module-resolver": "^3.1.3",
 "babel-plugin-transform-remove-console": "^6.9.4",
 "metro-react-native-babel-preset": "^0.48.1",

预期结果是logMeasurement方法正在生产应用程序中运行。

编辑

我的logMeasurement绑定无效。这是我的解决方法。

logMeasurement = async (id, phase, actualDuration, baseDuration) => { ... }

但是，它不能解决问题。回调仍未调用。

Answer 1


const logProfile = (
  id: string,
  phase: "mount" | "update",
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
  interactions: Set<any>
) => {
  console.log("Profiling ID", id);
  console.log("Profiling phase", phase);
  console.log("Profiling actualDuration", actualDuration);
  console.log("Profiling baseDuration", baseDuration);
  console.log("Profiling startTime", startTime);
  console.log("Profiling commitTime", commitTime);
  console.log("Profiling interactions", interactions);
};

class Sample extends React.Component {
  render() {
    return (
          <Profiler id="application" onRender={logProfile}>
              <div id="preload_hidden"></div>
          </Profiler>
    );
  }
}

Answer 2

由于这是实验性的，因此您需要在构建时选择加入。

yarn build --profile

您也可以将其添加到带有别名的prod js文件上的Webpack构建中

'react-dom$': 'react-dom/profiling'

Answer 3

我有一个非常相似的问题。显然是由“ id”中的“-”引起的。

从

更改

<Profiler id="Main-Value-Circle" onRender={this.profilerCallback}>

到

<Profiler id="MainValueCircle" onRender={this.profilerCallback}>

解决了我的问题。

为什么`unstable_Profiler`无法在生产模式下进行性能分析？

编辑

3 个答案: