วัตถุประสงค์และความสำคัญของ React Web นั้นชัดเจนมาก: ให้ React Native Code ทำงานบนเว็บและให้ชุดของรหัสทำงานบนขั้วมือถือต่างๆ สำหรับส่วนหน้าและธุรกิจนี่คือการปรับปรุงเชิงคุณภาพในการพัฒนาประสิทธิภาพ ในระยะแรกของโครงการเรายังปรึกษาทีมตอบสนองด้วยคำถามที่คล้ายกัน เพื่อนร่วมชั้นหลักของทีม @Vjeux ก็คิดว่านี่เป็นสิ่งที่เจ๋งมากและสิ่งที่พวกเขาต้องการทำในอนาคต บางทีเมื่อตอบสนองพื้นเมืองสำหรับ Android, React Web อาจถูกปล่อยออกมา (yy)
สถาปัตยกรรมทางเทคนิค
มีโซลูชันการปรับตัวหลายอย่างที่ใช้ React Native:
1. พัฒนามาตรฐานบริดจ์และ RN และ RW แต่ละชุดใช้ชุดมาตรฐานนี้ด้วยวิธีที่ดีที่สุด
ตัวอย่างเช่นขึ้นอยู่กับเค้าโครง Flex เราใช้ชุดส่วนประกอบ Flex ที่สอดคล้องกัน <flex>, <Sell> ฯลฯ
2. สอดคล้องกับ RN อย่างสมบูรณ์ RW ใช้ API ทั้งหมดที่ RN สามารถใช้งานได้
ในการสนทนาในที่สุดก็ถูกเลือกในที่สุด
เนื่องจากแนวคิดของ React Web ให้ React Native Code ทำงานบนเว็บด้านจึงกำหนดว่า RW เป็นเพียงเครื่องมือการก่อสร้างและบรรจุภัณฑ์ที่แยกออกจาก RN และการใช้งาน RW นั้นไม่สำคัญมากนัก จากนั้นทิศทางทางเทคนิคโดยรวมนั้นชัดเจนมาก: เพื่อใช้สไตล์ RN ที่สอดคล้องกันส่วนประกอบและ API และในที่สุดก็รวบรวมเป็นเว็บเวอร์ชันผ่านเครื่องมือการก่อสร้าง
ตัวอย่าง
มาดูกระบวนการสร้างของโครงการ React Web:
ขั้นตอนที่ 1: ติดตั้ง React Web และดำเนินการกำหนดค่าที่เกี่ยวข้อง
ขั้นตอนนี้เป็นหลักในการติดตั้งแพ็คเกจ React-Web และการพึ่งพาที่เกี่ยวข้องและกำหนดค่าสคริปต์บรรจุภัณฑ์ Webpack
เพื่อให้ขั้นตอนนี้ง่ายขึ้นเราได้พัฒนาเครื่องมือบรรทัดคำสั่ง react-web-cli ซึ่งต้องใช้การดำเนินการของคำสั่งสองบรรทัดเท่านั้น ในเวลาเดียวกันเครื่องมือบรรทัดคำสั่งยังรองรับการเริ่มต้นเซิร์ฟเวอร์การดีบักบรรจุภัณฑ์และฟังก์ชั่นอื่น ๆ ซึ่งจะมีการแนะนำในภายหลัง
ติดตั้งเครื่องมือ CLI:
npm ติดตั้ง react-web-cli -g
ติดตั้งและกำหนดค่า React Web ฯลฯ :
React-Web Init <ไดเรกทอรีโครงการปัจจุบัน>
หลังจากการดำเนินการเสร็จสมบูรณ์ไลบรารีที่เกี่ยวข้องกับการติดตั้ง NPM จะถูกสร้างขึ้นในไดเรกทอรีโครงการของคุณและไฟล์ web/webpack.config.js จะถูกสร้างขึ้นโดยอัตโนมัติโดยมีการกำหนดค่าเป็นลายลักษณ์อักษร ในเวลานี้โครงสร้างไดเรกทอรีคือ:
.├──readme.md├── Android/├──index.android.js├─index.ios.js├─รวง
ขั้นตอนที่ 2: เพิ่มไฟล์รายการและทำการกำหนดค่าที่เกี่ยวข้อง
แต่ละโครงการจะต้องมีไฟล์รายการซึ่งมักจะใช้เพื่อแนะนำและโทรหาส่วนประกอบอื่น ๆ และเริ่มต้นโครงการเช่น index.ios.js แสดงถึงไฟล์รายการของโครงการบนแพลตฟอร์ม iOS เพื่อให้สอดคล้องกับข้อกำหนดการตั้งชื่อไฟล์ Native React เราสร้าง index.web.js เป็นไฟล์รายการและเราจำเป็นต้องระบุว่าไฟล์เป็นไฟล์รายการใน WebPack เปิดไฟล์ web/webpack.config.js และแก้ไขตัวแปร config:
var config = {paths: {src: path.join (root_path, '.'), ดัชนี: path.join (root_path, 'index.web'),},};จากนั้นเราสร้างไฟล์ index.web.js ไฟล์นี้คล้ายกับ index.ios.js มาก แต่แตกต่างกันเล็กน้อย ความแตกต่างที่สำคัญคือ iOS ต้องการเฉพาะ appregistry.registerComponent ('AWES', () => AWES); เพื่อให้รหัสดั้งเดิมของ Xcode สามารถรับและประมวลผลรหัส JS ของคุณได้ในขณะที่ Web Web จะต้องแทรกลงในโหนด DOM ก่อนที่จะสามารถใช้งานได้ ดังนั้นเราจำเป็นต้องเพิ่มรหัสต่อไปนี้ที่ด้านล่างของ index.web.js:
appregistry.registerComponent ('awes', () => awes); ถ้า (platform.os == 'web') {var app = document.createElement ('div'); document.body.appendchild (แอพ); appregistry.runapplication ('Awes', {Roottag: App});}จากนั้นจะต้องมีการแนะนำส่วนประกอบแพลตฟอร์มในส่วนด้านบนที่ต้องการ ด้วยวิธีนี้ส่วนการกำหนดค่าได้รับการประมวลผล เรียกใช้คำสั่ง react-web start เพื่อเริ่มต้นเซิร์ฟเวอร์การดีบัก!
คุณสามารถแก้ไขได้ตามต้องการมันเกือบจะเหมือนกับประสบการณ์ใน React Native Simulator
ขั้นตอนที่ 3: ทดสอบและแพ็คเกจรหัสเวอร์ชันเว็บ
เมื่อคุณแก้ไขและพัฒนาและทดสอบด้านเว็บเสร็จแล้วคุณสามารถบรรจุและเผยแพร่ได้ คำสั่งที่บรรจุโดยเครื่องมือ React-Web-Cli คือ:
มัดตอบกลับ
หลังจากบรรจุภัณฑ์ไฟล์จะถูกเก็บไว้ในเว็บ/ เอาต์พุต/ ไดเรกทอรี คุณสามารถเปิด index.html โดยตรง (หากแอพมีการร้องขอการดำเนินการคุณต้องตรวจสอบจากเซิร์ฟเวอร์ท้องถิ่น) จากนั้นคุณสามารถเผยแพร่ได้หลังจากตรวจสอบ
เกิดอะไรขึ้นระหว่างกระบวนการนี้?
นักเรียนที่อยากรู้อยากเห็นอาจมีคำถามบางอย่างเมื่อเห็นสิ่งนี้ คำสั่งบางคำของเครื่องมือบรรทัดคำสั่งด้านบนทำอะไร? เหตุใด React Web Package จึงตอบโต้รหัสเนทีฟลงในสำเนาของรหัสที่ใช้ในเว็บด้าน? React Web ปลอดภัยและเชื่อถือได้หรือไม่? มีอะไรอยู่ข้างใน?
ที่นี่ฉันจะแนะนำหลักการใช้งานของ React Web ในเวลาสั้น ๆ และขั้นตอนที่ทำจริง
React Web ดำเนินการตอบสนองส่วนประกอบเนทีฟทางด้านเว็บ
React แยกรหัสออกจากสภาพแวดล้อมแพลตฟอร์มเพิ่มเลเยอร์เพื่อให้นักพัฒนาสามารถทำการประมวลผลบางอย่างในระดับสภาพแวดล้อมของแพลตฟอร์มเพื่อให้รหัสเดียวกันสามารถปรับให้เข้ากับสภาพแวดล้อมของแพลตฟอร์มได้มากขึ้น ฯลฯ
ตัวอย่างเช่น React-Canvas เขียนโค้ดตามไวยากรณ์ของ React การประมวลผลบางอย่างในระดับสภาพแวดล้อมของแพลตฟอร์ม (เรียกใช้รหัสปฏิกิริยาของคุณและแสดงผลด้วยผ้าใบ) จากนั้นบรรลุเป้าหมายที่เฉพาะเจาะจง (ปรับปรุงประสิทธิภาพทางด้านมือถือ)
ใน React Native นั้นเป็นจริงสำหรับชิ้นส่วนของรหัสที่จะทำงานบน iOS และ Android ในเวลาเดียวกัน ทีม React Native ได้ทำการประมวลผลบางอย่างบนแอพดั้งเดิมของแพลตฟอร์มที่เกี่ยวข้องเพื่อให้สามารถแยกวิเคราะห์รหัสที่ดำเนินการไวยากรณ์ปฏิกิริยา
นอกจากนี้ยังมีแอพพลิเคชั่น isomorphic เซิร์ฟเวอร์ใช้ React + Node.js เพื่อสร้าง HTML และไคลเอนต์ใช้ React เพื่อรับการโต้ตอบและฟังก์ชั่นที่เกี่ยวข้องกับไคลเอนต์ เช่นเดียวกัน
ด้วยเหตุนี้ React v0.14.x รุ่นเริ่มต้นด้วยสองห้องสมุด React และ React-Dom ซึ่งจริง ๆ แล้วถอดการรักษาพิเศษของแพลตฟอร์มเบราว์เซอร์และเปลี่ยนเป็นไลบรารี React-Dom เพียงอย่างเดียว
สิ่งพิเศษเกี่ยวกับ React Native คือการใช้งานระดับต่ำสุดของส่วนประกอบคือการใช้งานของดั้งเดิมดังนั้นจึงไม่สนับสนุนแท็กเช่น Span และ Div แอนิเมชั่น ฯลฯ ยังเรียกว่า Native สำหรับการเรนเดอร์อินเทอร์เฟซโดยตรง ดังนั้นจึงไม่รองรับ Web Side แต่ส่วนประกอบส่วนใหญ่สามารถจำลองและนำไปใช้งานได้โดยใช้เทคโนโลยีเว็บ แอนิเมชั่นสามารถใช้ใน CSS3 องค์ประกอบพื้นฐานสามารถจำลองได้ด้วยแท็ก HTML เดียวกันปัญหาเค้าโครงและความเข้ากันได้สามารถจัดการได้ใน CSS ดังนั้นการตอบสนองของเว็บจะต้องดำเนินการอีกครั้งส่วนประกอบของ React Native โดยใช้เทคโนโลยีเว็บและด้วยความช่วยเหลือของ React Layer
เพื่อให้ตัวอย่างง่าย ๆ ส่วนประกอบข้อความ:
การใช้งาน React Native เรียกใช้รหัสพื้นฐานจำนวนมากของ React Native
สำหรับด้านเว็บเพียงแค่ใช้แท็ก <span> เพื่อส่งออกบรรทัดของข้อความดังนั้นการใช้งานของ React Web จะสร้างแท็ก <span> โดยตรงและมันก็โอเคที่จะผูกเหตุการณ์หรือบางสิ่งบางอย่าง
คุณสามารถใช้ส่วนประกอบดั้งเดิมที่สามารถทำงานใน UI Explorer Demo ด้วยความมั่นใจ
WebPack ช่วยให้คุณเปลี่ยนเป้าหมายบรรจุภัณฑ์
เมื่อทำส่วนประกอบที่เข้ากันได้กับด้านเว็บเราไม่จำเป็นต้องแทนที่ทั้งหมดที่ต้องการ ('React-Native') ในส่วนประกอบที่จะบรรจุด้วยความต้องการ ('React-Web')? มิฉะนั้นฉันจะใช้ส่วนประกอบเว็บเพื่อจัดทำแพ็คเกจได้อย่างไร
webpack ที่ทรงพลังมาพร้อมกับรายการการกำหนดค่านามแฝงเพื่อช่วยคุณแก้ปัญหานี้:
แก้ไข: {alias: {'React-Native': 'React-Web', 'ReactAnTiveArt': 'React-art',}, ส่วนขยาย: ['', '.js', '.jsx'],},},ด้วยวิธีนี้เมื่อบรรจุภัณฑ์สถานที่ทั้งหมดที่ต้องการ ('React-Native') จะถูกแทนที่ด้วยแพ็คเกจ React-Web และโมดูลของ React-Web การส่งออกจะสอดคล้องกับ React-Native เพื่อให้รหัสสามารถทำงานได้โดยไม่ต้องเปลี่ยน
นอกจากนี้วิธีการแนะนำอีกวิธีหนึ่งสามารถนำไปใช้กับปลั๊กอินได้โปรดดูด้านล่าง
แนะนำส่วนประกอบด้วยวิธีการเร่งรีบเพื่อปรับปรุงประสิทธิภาพ
WebPack และเครื่องมือบรรจุภัณฑ์อื่น ๆ ที่รองรับข้อกำหนดของ CommonJS จะบรรจุส่วนประกอบทั้งหมดของต้องการในไฟล์ด้วยกัน สำหรับ React Native ขนาดของรหัสไม่เกี่ยวข้อง แต่สำหรับเว็บมือถือมันมีความสำคัญมากกว่าเล็กน้อย โดยเฉพาะอย่างยิ่งหากโครงการของคุณต้องการส่วนประกอบข้อความเท่านั้น แต่มันเป็นเรื่องน่าเศร้าเพราะต้องการ ('React-Web') ส่งผลให้บรรจุส่วนประกอบทั้งหมดใน
จากปลั๊กอิน Webpack มีอีกวิธีหนึ่งในการแนะนำส่วนประกอบในการแก้ปัญหานี้คุณสามารถเรียกมันว่าวิธีเร่งด่วน วิธีนี้ต้องใช้การโหลด Webpack ปลั๊กอินเร่งด่วน-Webpack-Plugin การกำหนดค่า webpack เริ่มต้นได้รับการโหลดสำหรับคุณ คุณสามารถใช้มันโดยตรงในส่วนประกอบดังนี้:
VAR TEXT = ต้องการ ('reactText');แทนที่จะเป็นสิ่งที่เคยเป็นมาก่อน:
var {text} = ต้องการ ('react-native');ด้วยวิธีนี้เมื่อมีการบรรจุ webpack อดีตจะบรรจุเนื้อหาของส่วนประกอบนั้นเท่านั้นซึ่งสามารถลดขนาดและปรับปรุงประสิทธิภาพ สิ่งนี้ประสบความสำเร็จได้อย่างไร?
เมื่อโหลด webpack ของปลั๊กอินส่วนประกอบทั้งหมดจะถูกสแกนก่อนและข้อมูลของ @ProvidesModule ในส่วนหัวส่วนประกอบ (เช่นข้อมูลของส่วนประกอบข้อความ) และเมื่อต้องการชื่อส่วนประกอบในไฟล์อื่น ๆ ไฟล์จะถูกบรรจุโดยอัตโนมัติสำหรับบรรจุภัณฑ์ ในเวลาเดียวกันคุณสามารถแยกแยะความแตกต่างระหว่างแพลตฟอร์ม แม้ว่าจะเป็นชื่อเดียวกัน แต่แพลตฟอร์มจะแตกต่างกันเมื่อบรรจุไฟล์ที่เกี่ยวข้อง (ไฟล์จะถูกกำหนดตามกฎการตั้งชื่อของ index.xxx.js)