react i13n
v3.2.0
react-i13n bietet einen leistungsfähigen, skalierbaren und steckbaren Ansatz für die Instrumente Ihrer React-Anwendung.
In der Regel müssen Sie in Ihrer Anwendung, z. B. onClick -Handler an den Links, die Sie verfolgen möchten, in den Instrumentencode, z. B. die Onclick -Handler, manuell hinzufügen. react-i13n bietet einen vereinfachten Ansatz, indem Sie das Datenmodell definieren können, das Sie für Sie verfolgen und bearbeiten möchten.
react-i13n führt dies durch, indem Sie einen Instrumentierungsbaum erstellen, der Ihre Anwendungen widerspiegelt. React-Komponentenhierarchie. Alles, was Sie tun müssen, ist unsere React -Komponente zu nutzen, um zu bezeichnen, welche Komponenten die Tracking -Ereignisse abfeuern sollten.
i13nModel ) können ein einfaches JS -Objekt oder eine benutzerdefinierte Funktion sein. Dies bedeutet, dass Sie die Verfolgung von Daten dynamisch ändern können, ohne unnötige Neuanschläge zu verursachen.I13nNode . Dies bedeutet, dass die Daten nur dann beleuchtet werden, wenn sich der Knoten im Ansichtsfenster befindet. Dies reduziert die Netzwerknutzung für den Benutzer und bietet bessere Verfolgungsdetails.dangerouslySetInnerHTML verwenden. Wir scannen die Tags, die Sie auf der Client -Seite definieren, sie verfolgen und erstellen Knoten für sie im i13n -Baum. npm install react-i13n --save
React-i13n wird mit dem ES2015 geschrieben und sollte zusammen mit Polyfills für Funktionen wie Promise und Object.assign verwendet werden. Wir empfehlen Babel.
import React , { Component } from 'react' ;
import {
ReactI13n ,
createI13nNode ,
setupI13n
} from 'react-i13n' ;
import somePlugin from 'some-i13n-plugin' ; // a plugin for a certain instrumentation mechanism
// create a i13n anchor for link tracking
const I13nAnchor = createI13nNode ( 'a' , {
isLeafNode : true ,
bindClickEvent : true ,
follow : true
} ) ;
class DemoApp extends Component {
componentDidMount ( ) {
// fire a custom event
this . props . i13n . executeEvent ( 'pageview' , { } ) ;
}
render ( ) {
< span >
< I13nAnchor
href = "http://foo.bar"
i13nModel = { {
action : 'click' ,
label : 'foo'
} }
>
...
</ I13nAnchor >
// this link will be tracked, and the click event handlers provided by the plugin will get the model data as
// { site : 'foo' , action : 'click' , label : 'foo' }
</ span >
}
} ;
const I13nDempApp = setupI13n ( DemoApp , {
rootModelData : { site : 'foo' } ,
isViewportEnabled : true
} , [ somePlugin ] ) ;
// then you could use I13nDemoApp to render you app Oder folgen Sie unserem Leitfaden und erstellen Sie Ihren eigenen.
react-i13n baut den Instrumentierungsbaum durch Nutzung des React- context Merkmals. Jede Komponente kann eine i13nModel -Requisite definieren, die die Daten definiert, die sie verfolgen müssen. Dieser Ansatz ist leistungsfähiger, da Sie keine zusätzliche DOM -Manipulation benötigen, wenn Sie die Tracking -Datenwerte für das Versenden von Beacons sammeln möchten.
Da die I13N -Daten auf jeder Ebene definiert sind. Immer wenn Sie das i13nModel für einen bestimmten Knoten erhalten möchten, durchquert react-i13n den Baum, um alle i13nModel -Informationen in der Hierarchie zusammenzuführen. Da der Baum bereits gebaut ist, benötigen Sie keinen zusätzlichen DOM -Zugriff, was billig und effizient ist.
Die Aufführung war schon immer ein Thema, an dem wir arbeiten, und ja, es ist ein Overhead, um eine zusätzliche React -Komponente zu erstellen, die den Link wickelt, den Leistungsbenchmark wie unten:
link-without-react-component x 131,232 ops/sec ±1.08% (82 runs sampled)
link-wrapped-with-react-component x 111,056 ops/sec ±1.55% (88 runs sampled)
link-wrapped-with-react-component-with-i13n-high-order-component x 64,422 ops/sec ±1.95% (84 runs sampled)
Schauen Sie sich Rafael Martins 'Folien eines kürzlich durchgeführten React -Meetups an, um mehr zu verstehen.
Fügen Sie i13n_debug=1 zur Anforderungs -URL hinzu, Sie erhalten das i13N -Modell für jeden i13n node der direkt auf der Seite angezeigt wird. Es zeigt die Informationen für jede Modelldaten und wo die Daten erbt.
react-i13n mit ihr gegabelt.react-i13n und React-I13N-Ga. Wir überprüfen envify process.env.NODE_ENV !== 'production'
Verwenden Sie DefinePlugin um den Wert für process.env zu definieren.
// Example of the webpack configuration:
plugins: [
new webpack . DefinePlugin ( {
'process.env' : {
NODE_ENV : JSON . stringify ( 'production' )
}
} ) ,
...
] Ähnlich wie bei WebPack können Sie envify auch verwenden, um den Prozess zu setzen.env.node_env zur gewünschten Umgebung
$ browserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unit zum Ausführen von Einheitstests durchführengrunt cover , um den Bericht von Istanbul zu generierengrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs aus:SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalDiese Software kann unter der BSD -Lizenz Yahoo Inc. kostenlos verwendet werden. In der Lizenzdatei für Lizenztext und Copyright -Informationen finden Sie.
