react i13n
v3.2.0
react-i13n обеспечивает исполнительный, масштабируемый и подключенный подход к применению вашего приложения React.
Как правило, вы должны вручную добавлять код инструментов на протяжении всего вашего приложения, например, подключать обработчики onClick к ссылкам, которые вы хотите отслеживать. react-i13n предоставляет упрощенный подход, позволяя вам определить модель данных, которую вы хотите отслеживать и обрабатывать маяки для вас.
react-i13n делает это, создавая дерево инструментов, которое отражает ваши приложения, реагируя иерархию компонентов. Все, что вам нужно сделать, это использовать наш компонент React, чтобы обозначить, какие компоненты должны запустить события отслеживания.
i13nModel ) могут быть простой объектом JS или пользовательской функцией. Это означает, что вы можете динамически изменять данные отслеживания, не вызывая ненужных повторных ресурсов.I13nNode . Это означает, что данные будут маяки только тогда, когда узел находится в точке зрения. Это уменьшает использование сети для пользователя и предоставляет лучшие детали отслеживания.dangerouslySetInnerHTML . Мы сканируем теги, которые вы определяете на стороне клиента, отслеживаем их и строим узлы для них в дереве I13N. npm install react-i13n --save
React-I13N написан с учетом ES2015 и должен использоваться вместе с полифилами для таких функций, как Promise и Object.assign , чтобы поддержать все браузеры и более старые версии Node.js. Мы рекомендуем использовать Вавилон.
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 Или следуйте нашему руководству и создайте свой собственный.
react-i13n создает дерево инструментов, используя функцию context React. Каждый компонент может определить предложение i13nModel , которая определяет данные, необходимые для отслеживания. Этот подход более эффективен, так как это означает, что вам не нужны дополнительные манипуляции с DOM, когда вы хотите собрать значения данных отслеживания для отправки маяков.
Поскольку данные I13N определяются на каждом уровне. Всякий раз, когда вы хотите получить i13nModel для определенному узлу, react-i13n будет пересекать дерево, чтобы объединить всю информацию i13nModel в иерархии. Поскольку дерево уже построено, вам не нужен дополнительный доступ к DOM, который является дешевым и эффективным.
Производительность всегда была темой, над которой мы работаем, и да, это накладные расходы, чтобы создать дополнительный компонент React, обертывая ссылку, эталон производительности, как показано ниже:
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)
Взгляните на слайды Рафаэля Мартинса с недавней встречи React, чтобы понять больше.
Добавьте i13n_debug=1 к URL -адресу запроса, вы получите модель i13n для каждого i13n node непосредственно показанного на странице. Он показывает информацию для каждой модели данных и откуда наследуется данные.
react-i13n с ним.react-i13n и React-I13N-GA. Мы envify process.env.NODE_ENV !== 'production'
Используйте DefinePlugin , чтобы определить значение для process.env .
// Example of the webpack configuration:
plugins: [
new webpack . DefinePlugin ( {
'process.env' : {
NODE_ENV : JSON . stringify ( 'production' )
}
} ) ,
...
] Подобно WebPack, вы также можете использовать envify для установки Process.env.node_env в нужную среду
$ browserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unit для запуска модульных тестовgrunt cover для создания отчета о покрытии Стамбуляgrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs :SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalЭто программное обеспечение бесплатно использовать по лицензии Yahoo Inc. BSD. См. Файл лицензии для текста лицензии и информации об авторском праве.
