react i13n
v3.2.0
react-i13n RECT 응용 프로그램을 계측하기위한 성능, 확장 가능하며 플러그 가능한 접근 방식을 제공합니다.
일반적으로 응용 프로그램 전체에 계측 코드를 수동으로 추가해야합니다 (예 : onClick 핸들러를 추적하려는 링크에 연결합니다. react-i13n 추적하려는 데이터 모델을 정의하고 비코잉을 처리 할 수있게하여 단순화 된 접근 방식을 제공합니다.
react-i13n 응용 프로그램이 구성 요소 계층 구조를 반영하는 계측 트리를 만들어이를 수행합니다. REACT 구성 요소를 활용하여 추적 이벤트를 발사 해야하는 구성 요소를 표시하기 만하면됩니다.
i13nModel )는 일반 JS 객체 또는 사용자 정의 기능 일 수 있습니다. 즉, 불필요한 재 렌즈를 유발하지 않고 추적 데이터를 동적으로 변경할 수 있습니다.I13nNode 에 대한 뷰포트 (구독 -ui-event 통합) 확인을 활성화 할 수있는 옵션을 제공합니다. 즉, 노드가 뷰포트에있을 때만 데이터가 비콘이 될 것입니다. 이는 사용자의 네트워크 사용량을 줄이고 더 나은 추적 세부 사항을 제공합니다.dangerouslySetInnerHTML 교체 할 수없는 경우 자동 스캔 링크를 지원합니다. 클라이언트 측에서 정의하는 태그를 스캔하고 추적하고 I13N 트리에서 노드를 작성합니다. npm install react-i13n --save
React-I13N은 ES2015를 염두에두고 작성되었으며 모든 브라우저 및 기존 버전의 node.js를 지원하기 위해 Promise 및 Object.assign 과 같은 기능을 위해 Polyfills와 함께 사용해야합니다. 바벨을 사용하는 것이 좋습니다.
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 React context 기능을 활용하여 계측 트리를 빌드합니다. 각 구성 요소는 추적 해야하는 데이터를 정의하는 i13nModel prop를 정의 할 수 있습니다. 이 접근법은 더 성능이 뛰어납니다. 즉, 비콘을 보내기 위해 추적 데이터 값을 수집 할 때 추가 DOM 조작이 필요하지 않기 때문입니다.
I13N 데이터는 각 레벨에서 정의되므로. 특정 노드에 대한 i13nModel 얻으려면 react-i13n 트리를 백업하여 계층 구조에서 모든 i13nModel 정보를 병합합니다. 나무는 이미 제작되었으므로 저렴하고 효율적인 추가 돔 액세스가 필요하지 않습니다.
성능은 항상 우리가 작업하고있는 주제였으며, 다음과 같이 링크를 래핑하는 추가 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 Meetup의 Rafael Martins의 슬라이드를 살펴보고 더 많은 것을 이해하십시오.
요청 URL에 i13n_debug=1 추가하면 페이지에 직접 표시된 각 i13n node 의 i13n 모델을 얻게됩니다. 각 모델 데이터에 대한 정보와 데이터가 어디에서 상속되는지를 보여줍니다.
react-i13n 포크했습니다.react-i13n 및 React-I13N-GA를 통합하는 플럭 가능한 사이트. 우리는 process.env.NODE_ENV !== 'production' 확인하여 경고 메시지 인쇄 메시지와 같은 조치를 취해야하는지 확인합니다. 즉, 빌드 프로세스의 일부로 envify 같은 도구를 사용하여 생산 빌드를위한 비 생산 코드를 제거하는 것이 좋습니다.
DefinePlugin 사용하여 process.env 의 값을 정의하십시오.
// Example of the webpack configuration:
plugins: [
new webpack . DefinePlugin ( {
'process.env' : {
NODE_ENV : JSON . stringify ( 'production' )
}
} ) ,
...
] WebPack과 유사하게, 당신은 또한 face.env.node_env를 원하는 환경으로 설정하기 위해 envify 사용 할 수도 있습니다.
$ browserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unitgrunt covergrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.html 에서 기능 테스트 결과를 확인하십시오saucelabs 에서 기능 테스트 실행 :SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functional이 소프트웨어는 Yahoo Inc. BSD 라이센스에 따라 무료로 사용할 수 있습니다. 라이센스 텍스트 및 저작권 정보는 라이센스 파일을 참조하십시오.
