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 نوصي باستخدام بابل.
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)
ألقِ نظرة على شرائح رافائيل مارتينز من لقاء رد فعل حديث لفهم المزيد.
إضافة 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هذا البرنامج مجاني لاستخدامه بموجب ترخيص Yahoo Inc. BSD. راجع ملف الترخيص للحصول على نص الترخيص ومعلومات حقوق الطبع والنشر.
