react i13n
v3.2.0
react-i13n นำเสนอวิธีการที่สามารถปรับขนาดได้และสามารถเสียบได้ในการใช้เครื่องมือตอบสนองของคุณ
โดยทั่วไปคุณต้องเพิ่มรหัสเครื่องมือด้วยตนเองตลอดแอปพลิเคชันของคุณเช่นเชื่อมต่อตัวจัดการ onClick ไปยังลิงก์ที่คุณต้องการติดตาม react-i13n ให้วิธีการที่ง่ายขึ้นโดยให้คุณกำหนดรูปแบบข้อมูลที่คุณต้องการติดตามและจัดการสัญญาณสำหรับคุณ
react-i13n ทำสิ่งนี้โดยการสร้างแผนผังเครื่องมือที่สะท้อนการใช้งานของคุณตามลำดับชั้นของส่วนประกอบ สิ่งที่คุณต้องทำคือใช้ประโยชน์จากองค์ประกอบที่ตอบสนองของเราเพื่อแสดงว่าส่วนประกอบใดที่ควรยิงเหตุการณ์การติดตาม
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 พิเศษซึ่งราคาถูกและมีประสิทธิภาพ
ประสิทธิภาพเป็นหัวข้อที่เรากำลังดำเนินการอยู่เสมอและใช่มันเป็นค่าใช้จ่ายในการสร้างส่วนประกอบปฏิกิริยาเพิ่มเติมที่ห่อลิงค์มาตรฐานประสิทธิภาพดังต่อไปนี้:
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)
ลองดูสไลด์ของ Rafael Martins จากการพบปะตอบสนองล่าสุดเพื่อทำความเข้าใจเพิ่มเติม
เพิ่ม i13n_debug=1 ใน URL คำขอคุณจะได้รับโมเดล I13N สำหรับ i13n node แต่ละโหนดที่แสดงโดยตรงบนหน้า มันแสดงข้อมูลสำหรับข้อมูลแต่ละรุ่นและข้อมูลที่สืบทอดมาจาก
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 unit เพื่อเรียกใช้การทดสอบหน่วยgrunt cover เพื่อสร้างรายงานการรายงานข่าวของอิสตันบูลgrunt functional-debughttp://127.0.0.1:9999/tests/functional/page.htmlsaucelabs :SAUCE_USERNAME={id} SAUCE_ACCESS_KEY={accessKey} grunt functionalซอฟต์แวร์นี้ใช้งานได้ฟรีภายใต้ใบอนุญาต BSD ของ Yahoo Inc. ดูไฟล์ใบอนุญาตสำหรับข้อความใบอนุญาตและข้อมูลลิขสิทธิ์
