عرض مصدر ReactNative/systrace

<noinclude>{{DISPLAYTITLE:الواجهة Systrace في React Native}}</noinclude>
إن <code>Systrace</code> هي أداة تعريف الأداء، تعتمد على العلامات (marker-based profiling tool) المعيارية لمنصة Android، وتُثبّت مع حزمة أدوات منصّة Android. تُحاط كتل الشفرة البرمجيّة المشخَّصة بوسوم البداية، والنهاية فتظهر على شكل مخططٍ ملوَّنٍ، وتحوي كل من Android SDK، و [[ReactNative|React Native]]  على الوسوم المعيارية التي يمكن إظهارها.
__toc__
== مثال ==
تسمح <code>Systrace</code> بوسمٍ أحداث ‎‎‏JavaScript بوسمٍ، وبقيمةٍ صحيحةٍ، وهذا المثال لالتقاط أحداث JS غير المرتبطة بالزمن (non-Timed) ضمن EasyProfiler.  

* [https://snack.expo.dev/@hsoubwiki/systrace-function-component-example مثال لمكون دالّة (Function Component)]
<syntaxhighlight lang="javascript">
import React from "react";
import { Button, Text, View, SafeAreaView, 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 (
    <SafeAreaView style={styles.container}>
      <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
    <View style={styles.buttonRow}>
      <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> enableProfiling()}/>
      <Button title="Stop capturing" onPress={()=> stopProfiling()} color="#FF0000"/>
    </View>
    </SafeAreaView>
  );
}

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,
    fontSize: 25,
    textAlign: "center"
  },
  buttonRow: {
    flexBasis: 150,
    marginVertical: 16,
    justifyContent: 'space-evenly'
  }
});

export default App;
</syntaxhighlight>

* [https://snack.expo.dev/@hsoubwiki/systrace-class-component-example مثال لمكوّن صنف (Class Component)]
<syntaxhighlight lang="javascript">
import React, { Component } from "react";
import { Button, Text, View, SafeAreaView, 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 (
      <SafeAreaView style={styles.container}>
        <Text style={[styles.header, styles.paragraph]}>React Native Systrace API</Text>
      <View style={styles.buttonRow}>
        <Button title="Capture the non-Timed JS events in EasyProfiler" onPress={()=> this.enableProfiling()}/>
        <Button title="Stop capturing" onPress={()=> this.stopProfiling()} color="#FF0000"/>
      </View>
      </SafeAreaView>
    );
  }
}

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,
    fontSize: 25,
    textAlign: "center"
  },
  buttonRow: {
    flexBasis: 150,
    marginVertical: 16,
    justifyContent: 'space-evenly'
  }
});

export default App;
</syntaxhighlight>

== التوابع ==

=== <code>installReactHook()‎</code> === 
<syntaxhighlight lang="javascript">
static installReactHook(useFiber)
</syntaxhighlight>

=== <code>setEnabled()‎</code> ===
<syntaxhighlight lang="javascript">
static setEnabled(enabled)
</syntaxhighlight>

=== <code>isEnabled()‎</code> ===
<syntaxhighlight lang="javascript">
static isEnabled()
</syntaxhighlight>

=== <code>beginEvent()‎</code> ===
<syntaxhighlight lang="javascript">
static beginEvent(profileName?, args?)
</syntaxhighlight>يُستخدم هذا التابع لبدء التشخيص.

=== <code>endEvent()‎</code> ===
<syntaxhighlight lang="javascript">
static endEvent()
</syntaxhighlight>يُستخدم هذا التابع لإنهاء التشخيص، ويطلب بعد بدء التابع <code>()beginEvent</code> التشخيص ضمن إطار مكدس الاستدعاءات.

=== <code>beginAsyncEvent()‎</code> ===
<syntaxhighlight lang="javascript">
static beginAsyncEvent(profileName?)
</syntaxhighlight>يُستخدم التابع ‎‏<code>()beginAsyncEvent</code> لبدء التشخيص ثم يقوم التابع <code>()endAsyncEvent</code> بإنهائه، ويمكن أن يحصل الإنهاء ضمن عمليّةٍ (thread) أخرى أو خارج إطار مكدس الاستدعاءات، مثل انتظار إعادة قيمة المتغير cookie المستخدم كدخل في استدعاء تابع الإنهاء <code>()endAsyncEvent</code>.

=== <code>endAsyncEvent()‎</code> ===
<syntaxhighlight lang="javascript">
static endAsyncEvent(profileName?, cookie?)
</syntaxhighlight>

=== <code>counterEvent()‎</code> ===
<syntaxhighlight lang="javascript">
static counterEvent(profileName?, value?)
</syntaxhighlight>يُستخدم هذا التّابع لتسجيل قيمة المتغيّر <code>profileName</code> ضمن الخطّ الزمني <code>Systrace</code>.

== مصادر ==

* [https://facebook.github.io/react-native/docs/systrace صفحة Systrace في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native API]]