react i13n
v3.2.0
react-i13n proporciona un enfoque performador, escalable y conectable para instrumentar su aplicación React.
Por lo general, debe agregar manualmente el código de instrumentación a lo largo de su aplicación, por ejemplo, enganchar a los manejadores onClick a los enlaces que desea rastrear. react-i13n proporciona un enfoque simplificado al permitirle definir el modelo de datos que desea rastrear y manejar el balizco por usted.
react-i13n hace esto construyendo un árbol de instrumentación que refleje sus aplicaciones Reaccione la jerarquía de componentes. Todo lo que tiene que hacer es aprovechar nuestro componente React para denotar qué componentes deben disparar los eventos de seguimiento.
i13nModel ) pueden ser un objeto JS simple o una función personalizada. Esto significa que puede cambiar dinámicamente los datos de seguimiento sin causar re-renderizadores innecesarios.I13nNode . Lo que significa que los datos solo se balancearán cuando el nodo esté en la ventana gráfica. Esto reduce el uso de la red para el usuario y proporciona mejores detalles de seguimiento.dangerouslySetInnerHTML . Escaneamos las etiquetas que define en el lado del cliente, las rastreamos y construimos nodos para ellos en el árbol i13n. npm install react-i13n --save
React-I13n está escrito con ES2015 en mente y debe usarse junto con polyfills para características como Promise and Object.assign Recomendamos usar 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 O siga nuestra guía y cree la suya propia.
react-i13n construye el árbol de instrumentación aprovechando la función context React. Cada componente puede definir un accesorio i13nModel que define los datos que necesita para rastrear. Este enfoque es más rendimiento, ya que significa que no necesita una manipulación DOM adicional cuando desea recopilar los valores de datos de seguimiento para enviar balizas.
Dado que los datos I13N se definen en cada nivel. Cada vez que desee obtener el i13nModel para un determinado nodo, react-i13n atravesará el árbol para fusionar toda la información de i13nModel en la jerarquía. Dado que el árbol ya está construido, no necesita acceso DOM adicional, lo cual es barato y eficiente.
El rendimiento siempre ha sido un tema en el que estamos trabajando, y sí, es una sobrecarga para crear un componente React adicional que envuelve el enlace, el punto de referencia de rendimiento a continuación:
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)
Eche un vistazo a las diapositivas de Rafael Martins de una reunión reciente de React para comprender más.
Agregue i13n_debug=1 a la URL de solicitud, obtendrá el modelo I13N para cada i13n node que se muestra directamente en la página. Muestra la información para cada modelo de datos y de dónde heredan los datos.
react-i13n con él.react-i13n y react-i13n-ga. Verificamos process.env.NODE_ENV !== 'production' para determinar si debemos hacer alguna acción como el mensaje de advertencia de impresión, lo que significa que se recomienda utilizar herramientas como envify como parte de su proceso de compilación para eliminar el código de no producción para la compilación de producción.
Use DefinePlugin para definir el valor para process.env .
// Example of the webpack configuration:
plugins: [
new webpack . DefinePlugin ( {
'process.env' : {
NODE_ENV : JSON . stringify ( 'production' )
}
} ) ,
...
] Similar a Webpack, también puede usar envify para establecer Process.env.node_env al entorno deseado
$ browserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unit para ejecutar pruebas unitariasgrunt cover para generar el informe de cobertura de Estambulgrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs :SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalEste software es gratuito bajo la licencia de Yahoo Inc. BSD. Consulte el archivo de licencia para ver el texto de la licencia y la información de derechos de autor.
