react i13n
v3.2.0
react-i13n memberikan pendekatan performant, scalable dan pluggable untuk menginstrumentasikan aplikasi React Anda.
Biasanya, Anda harus menambahkan kode instrumentasi secara manual di seluruh aplikasi Anda, misalnya, menghubungkan penangan onClick ke tautan yang ingin Anda lacak. react-i13n memberikan pendekatan yang disederhanakan dengan membiarkan Anda mendefinisikan model data yang ingin Anda lacak dan menangani suaring untuk Anda.
react-i13n melakukan ini dengan membangun pohon instrumentasi yang mencerminkan aplikasi Anda reaksi hierarki komponen. Yang harus Anda lakukan adalah memanfaatkan komponen Bereaksi kami untuk menunjukkan komponen mana yang harus menembakkan peristiwa pelacakan.
i13nModel ) dapat menjadi objek JS biasa atau fungsi khusus. Ini berarti Anda dapat secara dinamis mengubah data pelacakan tanpa menyebabkan re-render yang tidak perlu.I13nNode . Yang berarti bahwa data hanya akan diarahkan ketika simpul berada di viewport. Ini mengurangi penggunaan jaringan untuk pengguna dan memberikan detail pelacakan yang lebih baik.dangerouslySetInnerHTML . Kami memindai tag yang Anda tentukan di sisi klien, melacaknya dan membangun node untuk mereka di pohon i13n. npm install react-i13n --save
React-I13N ditulis dengan ES2015 dalam pikiran dan harus digunakan bersama dengan polyfill untuk fitur seperti Promise dan Object.assign untuk mendukung semua browser dan versi yang lebih lama dari node.js. Kami merekomendasikan menggunakan 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 Atau ikuti panduan kami dan buat sendiri.
react-i13n membangun pohon instrumentasi dengan memanfaatkan fitur context React. Setiap komponen dapat menentukan prop i13nModel yang mendefinisikan data yang perlu dilacak. Pendekatan ini lebih berkinerja, karena itu berarti Anda tidak memerlukan manipulasi DOM tambahan ketika Anda ingin mengumpulkan nilai data pelacakan untuk mengirimkan suar.
Karena data I13N didefinisikan di setiap level. Kapanpun Anda ingin mendapatkan i13nModel untuk node tertentu, react-i13n akan melintasi kembali pohon untuk menggabungkan semua informasi i13nModel dalam hierarki. Karena pohon sudah dibangun, Anda tidak memerlukan akses DOM tambahan, yang murah dan efisien.
Kinerja selalu menjadi topik yang sedang kami kerjakan, dan ya itu overhead untuk membuat komponen reaksi tambahan yang membungkus tautan, tolok ukur kinerja seperti di bawah ini:
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)
Lihatlah slide Rafael Martins dari pertemuan React baru -baru ini untuk lebih memahami.
Tambahkan i13n_debug=1 ke URL permintaan, Anda akan mendapatkan model I13N untuk setiap i13n node yang ditampilkan secara langsung di halaman. Ini menunjukkan informasi untuk setiap data model dan dari mana data diwarisi.
react-i13n dengan itu.react-i13n dan React-I13n-Ga. Kami memeriksa process.env.NODE_ENV !== 'production' untuk menentukan apakah kami harus melakukan beberapa tindakan seperti mencetak pesan peringatan, itu berarti disarankan untuk menggunakan alat seperti envify sebagai bagian dari proses pembuatan Anda untuk menghapus kode non-produksi untuk pembangunan produksi.
Gunakan DefinePlugin untuk menentukan nilai untuk process.env .
// Example of the webpack configuration:
plugins: [
new webpack . DefinePlugin ( {
'process.env' : {
NODE_ENV : JSON . stringify ( 'production' )
}
} ) ,
...
] Mirip dengan Webpack, Anda juga dapat menggunakan envify untuk mengatur proses.env.node_env ke lingkungan yang diinginkan
$ browserify index.js -t [ envify --NODE_ENV production ] | uglifyjs -c > bundle.js
grunt unit untuk menjalankan tes unitgrunt cover Untuk Menghasilkan Laporan Cakupan Istanbulgrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs :SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalPerangkat lunak ini bebas digunakan di bawah lisensi BSD Yahoo Inc. Lihat file lisensi untuk teks lisensi dan informasi hak cipta.
