react i13n
v3.2.0
react-i13n fournit une approche performante, évolutive et enfichable pour instrumenter votre application React.
En règle générale, vous devez ajouter manuellement du code d'instrumentation dans votre application, par exemple, connecter des gestionnaires onClick aux liens que vous souhaitez suivre. react-i13n fournit une approche simplifiée en vous permettant de définir le modèle de données que vous souhaitez suivre et gérer le balise pour vous.
react-i13n le fait en construisant un arbre d'instrumentation qui reflète la hiérarchie des composants réagis à vos applications. Tout ce que vous avez à faire est de tirer parti de notre composant React pour indiquer les composants que les composants doivent licencier les événements de suivi.
i13nModel ) peuvent être un objet JS simple ou une fonction personnalisée. Cela signifie que vous pouvez modifier dynamiquement les données de suivi sans provoquer des redevateurs inutiles.I13nNode . Ce qui signifie que les données ne seront pas colorées que lorsque le nœud est dans la fenêtre. Cela réduit l'utilisation du réseau pour l'utilisateur et fournit de meilleurs détails de suivi.dangerouslySetInnerHTML . Nous numérisons les balises que vous définissez du côté client, les suivons et construisons des nœuds pour eux dans l'arborescence i13n. npm install react-i13n --save
React-I13N est écrit avec ES2015 à l'esprit et doit être utilisé avec des polyfills pour des fonctionnalités telles que Promise et Object.assign afin de prendre en charge tous les navigateurs et les anciennes versions de Node.js. Nous vous recommandons d'utiliser 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 Ou suivez notre guide et créez le vôtre.
react-i13n construit l'arbre d'instrumentation en tirant parti de la fonction context React. Chaque composant peut définir un accessoire i13nModel qui définit les données dont il a besoin pour suivre. Cette approche est plus performante, car cela signifie que vous n'avez pas besoin de manipulation DOM supplémentaire lorsque vous souhaitez collecter les valeurs de données de suivi pour l'envoi de balises.
Étant donné que les données I13N sont définies à chaque niveau. Chaque fois que vous voulez obtenir le i13nModel pour un certain nœud, react-i13n traversera l'arbre pour fusionner toutes les informations i13nModel dans la hiérarchie. Étant donné que l'arbre est déjà construit, vous n'avez pas besoin d'accès DOM supplémentaire, ce qui est bon marché et efficace.
Les performances ont toujours été un sujet sur lequel nous travaillons, et oui, c'est une surcharge pour créer un composant React supplémentaire enroulant le lien, la référence Performance comme ci-dessous:
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)
Jetez un œil aux diapositives de Rafael Martins d'une récente rencontre React pour en savoir plus.
Ajoutez i13n_debug=1 à l'URL de demande, vous obtiendrez le modèle i13n pour chaque i13n node directement affiché sur la page. Il montre les informations de chaque donnée de modèle et d'où les données héritent de.
react-i13n intégré avec lui.react-i13n et React-I13N-GA. Nous vérifions process.env.NODE_ENV !== 'production' pour déterminer si nous devons faire une action comme imprimer le message d'avertissement, cela signifie qu'il est recommandé d'utiliser des outils comme envify dans le cadre de votre processus de construction pour éliminer le code de non-production pour la construction de production.
Utilisez DefinePlugin pour définir la valeur du process.env .
// Example of the webpack configuration:
plugins: [
new webpack . DefinePlugin ( {
'process.env' : {
NODE_ENV : JSON . stringify ( 'production' )
}
} ) ,
...
] Semblable à webpack, vous pouvez également utiliser envify pour définir Process.env.node_env dans l'environnement souhaité
$ browserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unit to Unit Testsgrunt cover pour générer le rapport de couverture d'Istanbulgrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs :SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalCe logiciel est gratuit dans le cadre de la licence BSD de Yahoo Inc. Voir le fichier de licence pour le texte de licence et les informations sur le droit d'auteur.
