คำอธิบายโดยละเอียดเกี่ยวกับวิธีการใช้แอปพลิเคชันหน้าเดียวตอบสนอง

ก่อนอื่นก่อนที่จะเรียนรู้กรอบนี้คุณต้องมีความเข้าใจเกี่ยวกับความรู้ต่อไปนี้:

1. พื้นฐาน JS พื้นเมือง

2. CSS พื้นฐาน

พื้นฐานการจัดการแพ็คเกจ 3.NPM

4. Webpack Build Basics Project

5..ES6 ข้อกำหนด

คะแนนความรู้ห้าประการข้างต้นยังเป็นงานล่วงหน้าที่ต้องเข้าใจในการเรียนรู้กรอบส่วนหน้าอื่น ๆ

ฉันจะไม่พูดอะไรมากเกี่ยวกับ JS และ CSS NPM เป็นเครื่องมือจัดการแพ็คเกจที่ได้รับการสนับสนุนและโดดเด่นที่สุดในปัจจุบัน คุณสามารถพิจารณาได้หากคุณยังใช้ Bower หรือเครื่องมืออื่น ๆ ในฐานะเครื่องมือบรรจุภัณฑ์รุ่นใหม่ WebPack ได้ครองเครื่องมือบรรจุภัณฑ์ส่วนหน้าแล้วและมีข้อได้เปรียบที่ดีเมื่อเทียบกับเบราว์เซอร์ สำหรับข้อกำหนด ES6 แม้ว่าเบราว์เซอร์กระแสหลักจะไม่เข้ากันได้ในขณะนี้พวกเขาสามารถแปลงได้โดยใช้ตัวแปลงเช่นบาเบล

เมื่อรวมกรอบส่วนหน้าหลักอื่น ๆ ฉันเชื่อว่ามีสามสิ่งพื้นฐานในการสร้างแอปพลิเคชันหน้าเดียว: ส่วนประกอบการกำหนดเส้นทางและการจัดการสถานะ จากนั้นฉันจะแนะนำ React ตามทั้งสามนี้แน่นอนว่าจะมีจุดความรู้เพิ่มเติมบางส่วนสลับกันที่นั่น

ส่วนประกอบ

การเขียนและการโทรส่วนประกอบของ React ส่วนใหญ่ขึ้นอยู่กับ Modularity ของ ES6 และไวยากรณ์ JSX นี่คือตัวอย่าง:

 // main.jsimport React จาก 'react'import {render} จาก' react-dom'import myComponent จาก './Component.js'import' ./main.css'// คลาสส่วนประกอบหลัก mydemo ขยาย react.component {render (render) />), document.getElementById ('app')) // component.js // นำเข้าองค์ประกอบย่อยตอบสนองจาก 'react'export คลาสเริ่มต้น myComponent ขยาย React.Component {render () {return (<v> <p> นี่คือส่วนประกอบ!

เมื่อเทียบกับเฟรมเวิร์ก Vue.js ฉันคิดว่าวิธีการเขียนส่วนประกอบของการตอบสนองนั้นไม่สะดวกสบายเท่ากับ Vue และสไตล์ CSS ของส่วนประกอบยังคงแยกออกจากด้านนอกของส่วนประกอบดังนั้นจึงไม่สะดวกที่จะรักษา

จากตัวอย่างนี้เราสามารถเห็นคุณสมบัติของ DOM เสมือนจริงของ React และ JSX เมื่อเปรียบเทียบกับเฟรมเวิร์กอื่น ๆ DOM เสมือนของ React ไม่เพียง แต่สามารถปรับปรุงประสิทธิภาพของหน้าเว็บได้ แต่ยังป้องกันการโจมตีของ XSS ฯลฯ หลักการเฉพาะของ DOM เสมือนไม่ได้ถูกนำมาใช้ที่นี่

สำหรับไวยากรณ์ JSX มันเป็นน้ำตาลไวยากรณ์ชนิดหนึ่งของ JS เราสามารถใช้ฟังก์ชั่นบางอย่างผ่านน้ำตาลไวยากรณ์นี้ได้อย่างง่ายดาย ที่นี่ JSX แปลงไวยากรณ์ของ XML เป็น JavaScript บริสุทธิ์และองค์ประกอบ XML แอตทริบิวต์และโหนดเด็กจะถูกแปลงเป็นพารามิเตอร์ของ React.createElement น้ำตาลไวยากรณ์ JS ที่คล้ายกันรวมถึง TypeScript และประเภทอื่น ๆ

การกำหนดเส้นทาง

กลไกการกำหนดเส้นทางส่วนหน้าเป็นหนึ่งในลิงก์ที่สำคัญที่สุดในการสร้างแอปพลิเคชันหน้าเดียว (SPAs) ผ่านการกำหนดเส้นทางส่วนหน้าเราสามารถเพิ่มประสิทธิภาพประสบการณ์ผู้ใช้โดยไม่ได้รับข้อมูลทั้งหมดจากเซิร์ฟเวอร์ทุกครั้งเพื่อนำเสนอหน้าเว็บให้กับผู้ใช้อย่างรวดเร็ว

การกำหนดเส้นทางตอบสนองขึ้นอยู่กับ เราเตอร์ React เราเตอร์ตอบสนอง ช่วยให้ UI และ URL ซิงค์ซิงค์ มันมี APIs อย่างง่ายและคุณสมบัติที่ทรงพลังเช่นการโหลดบัฟเฟอร์โค้ดการจับคู่การกำหนดเส้นทางแบบไดนามิกและการสร้างการเปลี่ยนแปลงตำแหน่งที่ถูกต้อง

นี่คือตัวอย่างของการกำหนดเส้นทางปฏิกิริยา:

 นำเข้าปฏิกิริยา {ส่วนประกอบ} จาก 'react'import {render} จาก' react-dom'import {เราเตอร์, เส้นทาง, ดัชนี, ลิงก์, ลิงก์, BrowserHistory} จาก 'react-router'Const active = {color:' Red '} Activestyle = {active}>> </lining> </li> <li> <link to = "/users" activestyle = {active}> หน้าผู้ใช้ </link> </li> </ul> {this.props.children} </div>) ผู้ใช้ขยาย React.Component {render () {return (<div> <h2> ผู้ใช้ </h2> </div>)}} reender ((<เราเตอร์ประวัติ = {browserhistory}> <route path = "/" component = {App}> </router>), document.getElementById ('แอป')))

วิธีการกำหนดเส้นทางเดียวสำหรับ React เท่านั้นที่แสดงไว้ที่นี่ เมื่อเทียบกับเฟรมเวิร์กอื่น ๆ ไวยากรณ์ของการกำหนดเส้นทางปฏิกิริยานั้นง่ายต่อการเข้าใจ

การจัดการสถานะ

การจัดการสถานะไม่ใช่แอปพลิเคชันหน้าเดียวที่จำเป็น การใช้มันสามารถช่วยเราจัดการการเปลี่ยนแปลงในแต่ละรัฐในลักษณะที่เป็นเอกภาพทำให้กระบวนการโครงการทั้งหมดชัดเจนและบำรุงรักษาได้ การจัดการสถานะการดำเนินการตอบสนองสามารถใช้ Redux ที่แนะนำอย่างเป็นทางการ

Redux ใช้การไหลของข้อมูลทางเดียวที่เข้มงวด สถานะแอปพลิเคชันทั้งหมดจะถูกเก็บไว้ในแผนผังวัตถุและต้นไม้วัตถุนี้มีอยู่ในร้านค้าเพียงแห่งเดียวเท่านั้น

ตัวอย่างโครงการ

ที่นี่ฉันเขียนเว็บไซต์หน้าเดียวโดยใช้ React และหน้ามีดังนี้:

นำมาใช้

เนื่องจากฉันใช้ Fetch สำหรับการโต้ตอบ AJAX ในตัวอย่างข้างต้นฉันจะแนะนำการดึงข้อมูลที่นี่สั้น ๆ

เราสามารถใช้การดึงข้อมูลเป็นเทคโนโลยี Ajax รุ่นต่อไปซึ่งใช้วิธีการสัญญาที่เป็นที่นิยมในปัจจุบัน

การใช้ Fetch เราสามารถเขียน Ajax เพื่อโต้ตอบกับข้อมูลเช่นนี้:

 // รับเมธอดข้อมูล fetchfn = () => {fetch ('../../ data.json'). แล้ว ((res) => {console.log (res.status); return res.json ()} .then (data) => console.log (e.message)})}

สรุป

สิ่งที่สำคัญที่สุดเกี่ยวกับการเรียนรู้กรอบคือไม่ได้เรียนรู้เทคโนโลยี แต่การเรียนรู้แนวคิดการแก้ปัญหาที่เกิดขึ้น ผ่านการเรียนรู้กรอบของ React คุณสามารถค้นพบความคิดใหม่จากคุณสมบัติใหม่ที่เป็นเอกลักษณ์ เฉพาะเมื่อระดับความคิดขยายตัวคุณสามารถบินได้อย่างอิสระในมหาสมุทรที่ปลายด้านหน้า ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้ React