react i13n
v3.2.0
react-i13n fornece uma abordagem de desempenho, escalável e flugable para instrumentar seu aplicativo React.
Normalmente, você deve adicionar manualmente o código de instrumentação em todo o seu aplicativo, por exemplo, conectar os manipuladores onClick aos links que você deseja rastrear. react-i13n fornece uma abordagem simplificada, permitindo que você defina o modelo de dados que você deseja rastrear e manusear o farol para você.
react-i13n faz isso construindo uma árvore de instrumentação que reflete seus aplicativos reagir hierarquia de componentes. Tudo o que você precisa fazer é alavancar nosso componente React para denotar quais componentes devem disparar os eventos de rastreamento.
i13nModel ) podem ser um objeto JS simples ou função personalizada. Isso significa que você pode alterar dinamicamente os dados de rastreamento sem causar renderizadores desnecessários.I13nNode . O que significa que os dados serão apenas belisos quando o nó estiver na viewport. Isso reduz o uso de rede para o usuário e fornece melhores detalhes de rastreamento.dangerouslySetInnerHTML . Digitalizamos as tags que você define no lado do cliente, rastreamos e construímos nós na árvore I13N. npm install react-i13n --save
O React-I13N está escrito com o ES2015 em mente e deve ser usado junto com poli-preenchimentos para recursos como Promise e Object.assign para apoiar todos os navegadores e versões mais antigas do Node.js. 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 Ou siga nosso guia e crie o seu próprio.
react-i13n constrói a árvore de instrumentação, alavancando o recurso context do React. Cada componente pode definir um suporte i13nModel que define os dados que precisa rastrear. Essa abordagem é mais executiva, pois significa que você não precisa de manipulação de DOM adicional quando deseja coletar os valores de dados de rastreamento para enviar beacons.
Como os dados i13N são definidos em cada nível. Sempre que você quiser obter o i13nModel para um determinado nó, react-i13n atravessa a árvore para mesclar todas as informações i13nModel na hierarquia. Como a árvore já está construída, você não precisa de acesso extra ao DOM, o que é barato e eficiente.
O desempenho sempre foi um tópico em que estamos trabalhando e, sim, é uma sobrecarga para criar um componente de reação adicional que envolve o link, a referência de desempenho como abaixo:
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)
Dê uma olhada nos slides de Rafael Martins de um recente encontro de reação para entender mais.
Adicione i13n_debug=1 ao URL da solicitação, você receberá o modelo i13N para cada i13n node mostrado diretamente na página. Ele mostra as informações para cada modelo de dados e de onde os dados herdam.
react-i13n com ele.react-i13n e React-I13N-GA. Verificamos process.env.NODE_ENV !== 'production' para determinar se devemos fazer alguma ação como a mensagem de aviso de impressão, isso significa que é recomendável usar ferramentas como envify como parte do seu processo de construção para eliminar o código de não produção para construção de produção.
Use DefinePlugin para definir o valor para process.env .
// Example of the webpack configuration:
plugins: [
new webpack . DefinePlugin ( {
'process.env' : {
NODE_ENV : JSON . stringify ( 'production' )
}
} ) ,
...
] Semelhante ao webpack, você também pode usar envify para definir process.env.node_env para o ambiente desejado
$ browserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unit para executar testes de unidadegrunt cover para gerar o relatório de cobertura de Istambulgrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs :SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalEste software é gratuito para o uso da licença da Yahoo Inc. BSD. Consulte o arquivo de licença para obter informações sobre texto e direitos autorais.
