รับมือกับการตอบสนองด้วยปัจจัยทั้งห้านี้

เนื้อหา

• 01. ส่วนประกอบ
• 02. JSX
• 03. รัฐ
• 04. การไหลของข้อมูลทางเดียว
• 05. วิธีการตลอดอายุการใช้งาน
• ทบทวนปฏิกิริยา
• ต้องการปรับแต่งทักษะการตอบสนองของคุณเพิ่มเติมหรือไม่?

Learning React ไลบรารี JavaScript สำหรับสร้างอินเทอร์เฟซผู้ใช้จาก Facebook และ Instagram ดูเหมือนจะไม่เพียงพอจนกว่าคุณจะให้โอกาส สิ่งต่างๆจะง่ายขึ้นมากเมื่อคุณเข้าใจแนวคิดหลัก 5 ประการ ฉันเรียกสิ่งเหล่านี้ว่าการเปลี่ยนแปลงจิตใจทั้งห้า ส่วนประกอบ, JSX, สถานะ, วิธีการตลอดอายุการใช้งานและการไหลของข้อมูลทางเดียว

01. ส่วนประกอบ

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

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

ใน HTML คุณอาจคิดว่าแอปพลิเคชันนี้เป็นชุดขององค์ประกอบดังนี้:

div id = "petAppointments"> div> / div> div> / div> div> / div> / div>

และนั่นคือสิ่งที่คุณต้องทำใน React คุณสร้างแท็กเดียว (div id = "petAppointments">) ที่เรียกใช้คอมโพเนนต์ petAppointments ซึ่งจะเรียกส่วนประกอบย่อยอื่น ๆ ตามต้องการ ในการส่งผ่านอ็อบเจ็กต์คอนฟิกูเรชันเช่นนี้คุณใช้เมธอด createClass ของอ็อบเจ็กต์ React

var MainInterface = React.createClass ({render: function () {return (div className = "interface"> AddAppointment /> SearchAppointments /> ListAppointments /> / div>)} // render}); // MainInterface ReactDOM.render (MainInterface />, document.getElementById ('petAppointments')); // เรนเดอร์

มีสองวิธีการเรนเดอร์ ในคลาส MainInterface เราจะประกาศรายการที่จะส่งไปยังเบราว์เซอร์และเมธอด ReactDOM.render จะแทนที่องค์ประกอบ div id = "petAppointments"> / div> ใน HTML ของคุณด้วยโค้ดของ React จากนั้นเราจะเขียนโค้ดที่จัดการกับส่วนประกอบย่อยทั้งสามของเรา

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

02. JSX

JSX อาจเป็นหนึ่งในการเปลี่ยนแปลงความคิดที่ยิ่งใหญ่ที่สุดและเป็นหนึ่งในสาเหตุที่ทำให้ห้องสมุดดูแปลก ๆ JSX เป็นส่วนขยายของ JavaScript ที่ช่วยให้คุณสามารถรวมโค้ด XML กับ JavaScript

นี่คือสิ่งที่เกิดขึ้นกับภาษาเทมเพลตเช่น Moustache ซึ่งให้คุณรวม JavaScript ไว้ใน HTML แต่ JSX ได้รับการแปล (Transpiled) เป็น JavaScript ดังนั้นคุณจึงไม่ใช่แค่สร้างเทมเพลต แต่เป็นโครงสร้างที่แปลงเป็นชุดคำสั่ง JavaScript ซึ่งแตกต่างจากภาษาเทมเพลตคือไม่จำเป็นต้องตีความที่รันไทม์ ลองดูตัวอย่าง

li className = "pet-item media" key = {index}> div className = "pet-info media-body"> div className = "pet-head"> span className = "pet-name"> {this.state. data [index] .petName} / span> span className = "apt-date pull-right"> {this.state.data [index] .aptDate} / span> / div> div className = "owner-name"> span className = "label-item"> เจ้าของ: / span> {this.state.data [ดัชนี] .ownerName} / div> div className = "apt-notes"> {this.state.data [index] .aptNotes} / div> / div> / li>

เราสามารถใช้รหัสนี้เพื่อส่งออกการนัดหมายของเรา สิ่งนี้ให้ความรู้สึกเหมือนกับการใช้ภาษาเทมเพลตทั่วไปดังนั้นนอกเหนือจากการเรียนรู้นิสัยแปลก ๆ เล็กน้อยเกี่ยวกับ JSX แล้วคุณสามารถหยิบมันขึ้นมาได้อย่างรวดเร็ว

ส่วนที่แปลกเกี่ยวกับการใช้ JSX ไม่ใช่การเรียนรู้ภาษาเอง มันเป็นการเอาชนะความจริงที่ว่าการใส่ HTML ในโค้ด JavaScript ของคุณดูเหมือนว่า ... ดีผิด แต่เป็นเรื่องดีมากที่มีรหัสทั้งหมดสำหรับแต่ละองค์ประกอบอยู่ในที่เดียว

03. รัฐ

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

ในแอปพลิเคชันตัวอย่างของฉันสถานะเริ่มต้นถูกตั้งค่าดังนี้:

var MainInterface = React.createClass ({getInitialState: function () {return {aptBodyVisible: false, orderBy: ’petName’, orderDir: ’asc’, queryText: ’} // return}, // getInitialState

ดูเหมือนว่าฉันกำลังตั้งค่าตัวแปรส่วนกลางสำหรับแอปพลิเคชันของฉัน แต่การแก้ไขตัวแปรเหล่านี้จะควบคุมวิธีการแสดงผลของส่วนประกอบ หากบางสิ่งในแอปของฉันเปลี่ยนค่าของตัวแปรส่วนประกอบของฉันจะแสดงผลอีกครั้ง หากค่าของ orderBy เปลี่ยนแปลงตัวอย่างเช่นรายการการนัดหมายจะจัดลำดับใหม่

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

var React = ต้องใช้ ('ตอบสนอง'); var AptList = React.createClass ({handleDelete: function () {this.props.onDelete (this.props.whichItem)}, render: function () {return (li className = "pet-item media"> div className = " media-left "> ปุ่ม className =" pet-delete btn btn-xs btn-danger "onClick = {this.handleDelete}> span className =" glyphicon glyphicon-remove "> / span> / button> / div> div className = "pet-info media-body"> div className = "pet-head"> span className = "pet-name"> {this.props.singleItem.petName} / span> span className = "apt-date pull-right" > {this.props.singleItem.aptDate} / span> / div> div className = "owner-name"> span className = "label-item"> เจ้าของ: / span> {this.props.singleItem.ownerName} / div > div className = "apt-notes"> {this.props.singleItem.aptNotes} / div> / div> / li>) // return} // render}); // AptList module.exports = AptList;

ส่วนประกอบจะเกี่ยวข้องกับสองสิ่งเท่านั้น ขั้นแรกแสดงรายการการนัดหมายตามสถานะปัจจุบันของแอปพลิเคชัน ประการที่สองจัดการคลิกที่เครื่องหมาย "X สีแดง" อันใดอันหนึ่ง

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

ส่วนประกอบรายการเกี่ยวข้องกับการแสดงรายการเท่านั้น ไม่ต้องกังวลว่าจะเกิดอะไรขึ้นที่อื่น เป็นวิธีที่ยอดเยี่ยมในการสร้างแอปพลิเคชันและเมื่อคุณได้รับความสนใจคุณจะเห็นว่าเหตุใดจึงเป็นวิธีที่ดีกว่าในการเขียนโค้ด

04. การไหลของข้อมูลทางเดียว

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

var React = ต้องใช้ ('ตอบสนอง'); var AptList = React.createClass ({handleDelete: function () {this.props.onDelete (this.props.whichItem)}, render: function () {return (li className = "pet-item media"> div className = " media-left "> ปุ่ม className =" pet-delete btn btn-xs btn-danger "onClick = {this.handleDelete}> span className =" glyphicon glyphicon-remove "> / span> / button> / div> / li> ... ) // return} // render}); // AptList module.exports = AptList;

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

ในโมดูลหลักคุณจะต้องสร้างแอตทริบิวต์ให้กับแท็กที่คุณใช้เพื่อแสดงโมดูล ดูเหมือนว่าจะส่งแอตทริบิวต์ไปยังแท็ก HTML:

AptList onDelete = {this.deleteMessage} />

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

05. วิธีการตลอดอายุการใช้งาน

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

แต่บางครั้งคุณต้องสามารถทำสิ่งต่าง ๆ เพื่อตอบสนองต่อวิถีชีวิตการแสดงผล ป้อนวิธีการตลอดอายุการใช้งาน นี่คือวิธีขอให้ React จัดการงานในจุดต่างๆในการเรียกใช้งานแอปพลิเคชัน

มีตัวอย่างเช่นเมธอด lifecyle ที่อนุญาตให้คุณโหลดข้อมูลภายนอกผ่านการร้องขอ AJAX:

componentDidMount: function () {this.serverRequest = $ .get ('./ js / data.json', function (result) {var tempApts = result; this.setState ({myAppointments: tempApts}); // setState} ผูก (นี้)); }, // componentDidMount

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

ทบทวนปฏิกิริยา

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

บทความนี้ซึ่งแสดงโดย Ray Villalobos - ตีพิมพ์ครั้งแรกในฉบับที่ 286 ของ net ซึ่งเป็นนิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์ สมัครเน็ต.

ต้องการปรับแต่งทักษะการตอบสนองของคุณเพิ่มเติมหรือไม่?

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ React โปรดตรวจสอบว่าคุณได้รับตั๋วของคุณแล้วสร้างลอนดอนตั้งแต่วันที่ 19-21 กันยายน 2018. ก่อตั้ง React Academy เพื่อสอน React ทั่วโลกและเปิดตัว sizzy.co และ ok-google.ioKristijan Ristovski จะนำเสนอเวิร์กชอปของเขา - Learn How to Think in React ซึ่งเขาจะสำรวจแนวทางปฏิบัติที่ดีที่สุดของ React และสอนวิธีแก้ปัญหาจริงที่คุณอาจพบในกระบวนการสร้างแอป

Generate London จะมีขึ้นระหว่างวันที่ 19-21 กันยายน 2018รับตั๋วของคุณตอนนี้.

บทความที่เกี่ยวข้อง:

• 10 เคล็ดลับ ReactJS จากผู้เชี่ยวชาญที่คุณต้องรู้ในวันนี้
• สร้างแอปแดชบอร์ดด้วย React
• สร้างเครื่องเล่นเพลงง่ายๆด้วย React