react i13n
v3.2.0
react-i13n 、Reactアプリケーションを計装するためのパフォーマンスのあるスケーラブルでプラグ可能なアプローチを提供します。
通常、アプリケーション全体に機器コードを手動で追加する必要があります。たとえば、 onClickハンドラーを追跡するリンクに接続する必要があります。 react-i13nビーコンを追跡および処理するデータモデルを定義できるようにすることで、簡略化されたアプローチを提供します。
react-i13nアプリケーションReactコンポーネントの階層を反映する計装ツリーを構築することにより、これを行います。あなたがしなければならないのは、私たちのReactコンポーネントを活用して、どのコンポーネントが追跡イベントを発射するかを示すことです。
i13nModel ）は、プレーンJSオブジェクトまたはカスタム関数になります。これは、不必要な再レンダーを引き起こすことなく、追跡データを動的に変更できることを意味します。I13nNodeの[subscribe-ui-eventの統合）チェックを有効にするオプションを提供します。つまり、ノードがビューポートにあるときにのみデータがビーコンになります。これにより、ユーザーのネットワークの使用が削減され、追跡の詳細が向上します。dangerouslySetInnerHTMLを使用している場合。クライアント側で定義するタグをスキャンし、それらを追跡し、I13Nツリーでそれらのノードを作成します。 npm install react-i13n --save
React-I13NはES2015を念頭に置いて記述されており、 PromiseやObject.assignなどの機能のポリフィルとともに使用する必要があります。 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 または、ガイドに従って独自のガイドを作成します。
react-i13n React context機能を活用することにより、計装ツリーを構築します。各コンポーネントは、追跡する必要があるデータを定義する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 MeetupのRafael Martinsのスライドを見て、もっと理解してください。
i13n_debug=1をリクエストURLに追加すると、ページに直接表示される各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と同様に、 envifyを使用してprocess.env.node_envを目的の環境に設定することもできます
$ 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ライセンスの下で無料で使用できます。ライセンステキストと著作権情報については、ライセンスファイルを参照してください。
