Systrace في React Native

إن Systrace هي أداة تعريف الأداء، تعتمد على العلامات (marker-based profiling tool) المعيارية لمنصة Android، وتُثبّت مع حزمة أدوات منصّة Android. تُحاط كتل الشفرة البرمجيّة المشخَّصة بوسوم البداية، والنهاية فتظهر على شكل مخططٍ ملوَّنٍ. وتحوي كل من Android SDK، وReact Native على الوسوم المعيارية التي يمكن إظهارها.

مثال

تسمح Systrace بوسم أحداث ‪‏‫‬‫‪‎‎‏JavaScript (JS) بوسمٍ وبقيمةٍ صحيحةٍ. هذا المثال لالتقاط أحداث JS غير المرتبطة بالزمن (non-Timed) ضمن EasyProfiler

مثال لمكون دالة (Function Component Example)

import React from "react";
import { Button, Text, View, StyleSheet, Systrace } from "react-native";

const App = () =>  {

  const enableProfiling = () => {
    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
    Systrace.beginEvent('event_label')
    Systrace.counterEvent('event_label', 10);
  }

  const stopProfiling = () => {
    Systrace.endEvent()
  }

  return (
    <View style={styles.container}>
      <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
      <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> enableProfiling()}/>
      <Button title="Stop capturing" onPress={()=> stopProfiling()} color="#FF0000"/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 44,
    padding: 8
  },
   header: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center"
  },
  paragraph: {
    margin: 24,
    textAlign: "center"
  }
});

export default App;

مثال لمكون صنف (Class Component Example )

import React, { Component } from "react";
import { Button, Text, View, StyleSheet, Systrace } from "react-native";

class App extends Component {

  enableProfiling = () => {
    Systrace.setEnabled(true); // Call setEnabled to turn on the profiling.
    Systrace.beginEvent('event_label')
    Systrace.counterEvent('event_label', 10);
  }

  stopProfiling = () => {
    Systrace.endEvent()
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
        <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> this.enableProfiling()}/>
        <Button title="Stop capturing" onPress={()=> this.stopProfiling()} color="#FF0000"/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 44,
    padding: 8
  },
   header: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center"
  },
  paragraph: {
    margin: 24,
    textAlign: "center"
  }
});

export default App;

التوابع

`installReactHook()`

static installReactHook(useFiber)

`setEnabled()`

static setEnabled(enabled)

`isEnabled()`

static isEnabled()

`beginEvent()`

static beginEvent(profileName?, args?)

يُستخدم هذا التابع لبدء التشخيص.

`endEvent()`

static endEvent()

يُستخدم هذا التابع لإنهاء التشخيص، ويطلب بعد بدء التابع beginEvent() التشخيص ضمن إطار مكدس الاستدعاءات.

`beginAsyncEvent()`

static beginAsyncEvent(profileName?)

يُستخدم التابع beginAsyncEvent() لبدء التشخيص ثم يقوم التابعendAsyncEvent() بإنهائه، ويمكن أن يحصل الإنهاء ضمن عمليّةٍ (thread) أخرى أو خارج إطار مكدس الاستدعاءات، مثل انتظار إعادة قيمة المتغير cookie المستخدم كدخل في استدعاء تابع الإنهاء endAsyncEvent().

`endAsyncEvent()`

static endAsyncEvent(profileName?, cookie?)

`counterEvent()`

static counterEvent(profileName?, value?)

يُستخدم هذا التابع لتسجيل قيمة المتغيّر profileName ضمن الخط الزمني Systrace.

مصادر

صفحة Systrace في توثيق React Native الرسميّ