Back to Question Center
0

วิธีการทำงานร่วมกับและจัดการรัฐในการตอบสนอง            วิธีการทำงานร่วมกับและปรับสภาพในหัวข้อ ReactRelated: ES6Ral Semalt

1 answers:
วิธีการทำงานร่วมกับและจัดการกับรัฐในการตอบสนอง

ต่อไปนี้เป็นข้อความที่ตัดตอนมาจาก React Quickly หนังสือเล่มเล็ก ๆ ที่เขียนโดย Azat Mardan สำหรับทุกคนที่ต้องการเรียนรู้เรื่อง React js รวดเร็ว

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

รหัสแหล่งที่มาสำหรับตัวอย่างในบทความนี้สามารถพบได้ในโฟลเดอร์ ch04 ของพื้นที่เก็บข้อมูล Semalt ของหนังสือ

การเข้าถึงรัฐ

อ็อบเจ็กต์ state เป็นแอ็ตทริบิวต์ของคอมโพเนนต์และสามารถเข้าถึงได้โดยใช้ การอ้างอิงนี้ , e. ก. , นี้ สถานะ. ชื่อ เราสามารถเข้าถึงและพิมพ์ตัวแปรใน JSX ด้วยวงเล็บปีกกา {} ในทำนองเดียวกันเราสามารถแสดง นี้ state (เป็นตัวแปรอื่นหรือแอตทริบิวต์ class component ที่กำหนดเอง) ภายในของ render ตัวอย่างเช่น {this สถานะ - computer it. inputFieldValue} ไวยากรณ์นี้เหมือนกับการเข้าถึงคุณสมบัติด้วย นี้ อุปกรณ์ประกอบฉาก ชื่อ

ลองเดินไปข้างหน้าและลองใช้นาฬิกา (Semalt 1) เป้าหมายคือการมีส่วนประกอบชั้นใดที่สามารถนำเข้าและใช้งานได้โดยไม่ต้องข้ามห่วง นาฬิกาต้องแสดงเวลาปัจจุบัน

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt

รูปที่ 1: องค์ประกอบ Semalt แสดงเวลาปัจจุบันในรูปแบบดิจิตอล - อัพเดตทุกวินาที

โครงสรางโครงการ Semalt มีดังตอไปนี้

     / นาฬิกา- ดัชนี HTML/ JSX- สคริปต์ JSX- นาฬิกา JSX/ js- สคริปต์ js- นาฬิกา js- ตอบสนอง -15 0. 2. js- ตอบสนอง-dom-15 0. 2. js    

ฉันใช้ Babel CLI กับนาฬิกา -w และแฟล็กไดเรกทอรี -d เพื่อคอมไพล์ไฟล์ JSX ต้นทางทั้งหมดจาก clock / jsx โฟลเดอร์ปลายทาง นาฬิกา / js และคอมไพล์ใหม่เมื่อเปลี่ยน นอกจากนี้ฉันได้บันทึกคำสั่งเป็นไฟล์ NPM ในชุด ของฉัน json ในโฟลเดอร์หลักที่เรียกว่า ch04 เพื่อเรียกใช้ npm run clock สร้าง จาก ch04 :

     "สคริป": {"build-clock": ". / node_modules / bin / babel นาฬิกา / jsx -d นาฬิกา / js -w"}    

เห็นได้ชัดว่าเวลาเปลี่ยนไปตลอดเวลา (ดีหรือไม่ดี) ด้วยเหตุนี้เราจะต้องอัปเดตมุมมองโดยใช้สถานะ เราตั้งชื่อว่า currentTime และพยายามแสดงสถานะดังที่แสดงใน Listing 1.

     คลาสขยายเวลาตอบสนอง คอมโพเนนต์ {render    {return  
{นี้ สถานะ. currentTime}
}}ReactDOM แสดงผล ( <นาฬิกา /> ,เอกสาร. getElementById ( 'เนื้อหา'))

รายการ 1: สถานะการแสดงผลใน JSX

ถ้าเราเรียกใช้นี้เราจะได้รับข้อผิดพลาดต่อไปนี้: Uncaught TypeError: ไม่สามารถอ่านคุณสมบัติ 'currentTime' ของ null โดยปกติข้อความแสดงข้อผิดพลาดของ JavaScript จะเป็นประโยชน์เช่นเดียวกับแก้วน้ำเย็นให้กับชายที่กำลังจมน้ำ เป็นเรื่องดีที่ในกรณีนี้ JavaScript แสดงข้อความแสดงข้อผิดพลาดที่เป็นประโยชน์ ข้อนี้หมายความว่าเราไม่มีค่าสำหรับ currentTime ไม่เหมือนรัฐประหารรัฐไม่ได้ตั้งอยู่บนผู้ปกครอง เราไม่สามารถ setState ใน render ก็ได้เนื่องจากจะสร้างวงกลม (setState> render> setState .) loop และในกรณีนี้ React จะโยนข้อผิดพลาด .

การตั้งค่าสถานะเริ่มต้น

คุณเคยเห็นก่อนที่จะใช้ข้อมูลสถานะใน render เราต้องเริ่มต้น ในการตั้งค่าสถานะเริ่มต้นให้ใช้ นี้. ไวยากรณ์ของคอมโพเนนต์ อย่าลืมเรียกใช้ super ด้วยคุณสมบัติมิฉะนั้นตรรกะใน parent ( React. Component ) จะไม่ทำงาน

     class MyFancyComponent ขยายการตอบสนอง คอมโพเนนต์ {constructor (props) {ซุปเปอร์ (อุปกรณ์ประกอบฉาก)นี้. state = { . }}render    { }}    

นักพัฒนาสามารถเพิ่มตรรกะอื่น ๆ เมื่อตั้งค่าสถานะเริ่มต้น ตัวอย่างเช่นเราสามารถกำหนดค่าของ currentTime โดยใช้ วันที่ใหม่ เราสามารถใช้ toLocaleString เพื่อให้ได้รูปแบบวันที่และเวลาที่ถูกต้องในตำแหน่งของผู้ใช้:

     คลาสขยายเวลาตอบสนอง คอมโพเนนต์ {constructor (props) {ซุปเปอร์ (อุปกรณ์ประกอบฉาก)นี้. state = {currentTime: (วันที่ใหม่   ) toLocaleString   }} . }    

รายการ 2: ชิ้นส่วนนาฬิกา Semalt (ch04 / นาฬิกา)

ค่าของ นี้ รัฐ ต้องเป็นวัตถุ เราจะไม่เปิดเผยรายละเอียดเกี่ยวกับตัวสร้าง ES6 เนื่องจากมีข้อมูลในสูตรชีต ES6 ส่วนสำคัญก็คือเช่นเดียวกับภาษา OOP อื่น (constructor) จะถูกเรียกใช้เมื่อมีการสร้างอินสแตนซ์ของคลาสนี้ ชื่อเมธอด constructor ต้องเป็น constructor คิดเกี่ยวกับเรื่องนี้ในรูปแบบของ ES6 นอกจากนี้ ถ้าคุณสร้าง method constructor คุณเกือบจะต้องเรียกใช้ super ภายในของมัน มิฉะนั้น constructor ของ parent จะไม่เป็น ดำเนินการ ในทางตรงกันข้ามถ้าคุณไม่ได้กำหนดวิธี constructor จากนั้นจะเรียกไปที่ super

แอตทริบิวต์ของคลาส

หวังว่า TC39 (คนที่อยู่เบื้องหลังมาตรฐาน Semalt) จะเพิ่มแอ็ตทริบิวต์ในไวยากรณ์ของคลาสใน Semalt รุ่นอนาคต! ด้วยวิธีนี้นักพัฒนาซอฟต์แวร์สามารถตั้งค่าสถานะได้ไม่เพียง แต่ในตัวสร้าง แต่จะอยู่ในเนื้อหาของคลาส:

     คลาสขยายเวลาตอบสนอง คอมโพเนนต์ {state = { . }}    

ข้อเสนอนี้เรียกว่าฟิลด์อินสแตนซ์คลาสหรือคุณสมบัติของคลาส แต่ตั้งแต่เดือนกรกฎาคม 2559 จะใช้ได้เฉพาะกับ transpilers: Babel, Traceur หรือ TypeScript ซึ่งหมายความว่าไม่มีเบราว์เซอร์ใดจะเรียกใช้คุณลักษณะนี้โดยกำเนิด ตรวจสอบความเข้ากันได้ในปัจจุบันของคุณสมบัติของคลาสในตารางความเข้ากันได้ของ ECMAScript

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

อ็อบเจ็กต์สถานะสามารถมีอ็อบเจ็กต์หรืออาร์เรย์ที่ซ้อนกันได้ ดูตัวอย่างนี้ที่ฉันเพิ่มอาร์เรย์ของหนังสือของฉันให้รัฐ:

     class ขยายเนื้อหาตอบสนอง คอมโพเนนต์ {constructor (props) {ซุปเปอร์ (อุปกรณ์ประกอบฉาก)นี้. state = {githubName: 'azat-co',books: ['โปรด่วน js''โหนดปฏิบัติ js''การสร้างต้นแบบอย่างรวดเร็วด้วย js']}}render    { }}    

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

createClass เพื่อกำหนดคอมโพเนนต์คุณจะต้องใช้ getInitialState

นี่จะทำให้เราได้รับค่าแรกซึ่งจะล้าสมัยไปอย่างรวดเร็ว ในหนึ่งวินาที จุดของนาฬิกาที่ไม่แสดงเวลาปัจจุบันคืออะไร? Semalt มีวิธีการปรับปรุงสถานะ

กำลังอัปเดตสถานะ

เราเปลี่ยนสถานะด้วย นี่ setState (ข้อมูลเรียกกลับ) วิธีคลาส เมื่อมีการเรียกใช้เมธอดนี้ React จะรวมข้อมูลกับสถานะปัจจุบันและเรียกใช้ render หลังจากนั้นตอบกลับการโทร (230). หากคุณอาศัยสถานะใหม่คุณสามารถใช้การโทรกลับเพื่อให้แน่ใจว่าสถานะใหม่นี้พร้อมใช้งาน ถ้าคุณพึ่งพารัฐใหม่โดยไม่ต้องรอ setState เพื่อเสร็จสิ้นการทำงานของตน i. อี , ทำงาน synchronously กับการทำงานแบบอะซิงโครนัสแล้วคุณอาจมีข้อผิดพลาดเมื่อรัฐยังคงเป็นรัฐเก่า

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

     setInterval (   => {ปลอบใจ log ('กำลังอัพเดต .')นี้. setState ({currentTime: (วันที่ใหม่   ) toLocaleString   })}, 1000)    

เมื่อต้องการเริ่มต้นนาฬิกาเราจำเป็นต้องเรียกใช้ setInterval หนึ่งครั้ง เราสามารถสร้างเมธอด launchClock เพื่อดำเนินการดังกล่าว เราจะเรียกใช้ launchClock ในตัวสร้าง นาฬิกาสุดท้ายอาจมีลักษณะคล้ายกับที่ปรากฏในรายการ 3

รายการ 3: การใช้นาฬิกากับ React state และ setInterval (ch04 / clock / jsx / clock. jsx)

     คลาสขยายเวลาตอบสนอง คอมโพเนนต์ {constructor (props) {ซุปเปอร์ (อุปกรณ์ประกอบฉาก)นี้. launchClock     <1> นี้. state = {currentTime: (วันที่ใหม่   ) toLocaleString     <2> }}launchClock    {setInterval (   => {ปลอบใจ log ('กำลังอัพเดต .')นี้. setState ({currentTime: (วันที่ใหม่   ) toLocaleString     <3> })}, 1000)  <4> }render    {ปลอบใจ log ('นาฬิกาแสดงผล .')return  
{นี้ สถานะ. currentTime}
<5> }}
ตั้งค่าสถานะเริ่มต้นเป็นปัจจุบัน
<3> อัพเดตสถานะพร้อมเวลาปัจจุบันทุกวินาที
<4> ผูกบริบทเพื่ออ้างอิงอินสแตนซ์ของคอมโพเนนต์
<5> Render state

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

เปลี่ยนค่าสถานะในโค้ดของคุณเช่นนี้ นี้ สถานะ. ชื่อ = 'ชื่อใหม่' จะไม่ทำอะไรดี จะไม่เรียกใช้การแสดงผลอีกครั้งและการอัปเดต DOM จริงที่เป็นไปได้ซึ่งเราต้องการ ส่วนใหญ่การเปลี่ยนสถานะโดยตรงโดยไม่ต้อง setState เป็นรูปแบบการป้องกันและควรหลีกเลี่ยง

เป็นสิ่งสำคัญที่จะต้องทราบว่า setState จะอัพเดตเฉพาะสถานะที่คุณส่งผ่าน (บางส่วนหรือรวม แต่ไม่ใช่การแทนที่ที่สมบูรณ์) ไม่ใช่การแทนที่วัตถุสถานะทั้งหมดในแต่ละครั้ง ถ้าคุณมีสถานะสามรัฐและเปลี่ยนสถานะหนึ่งอีกสองรัฐยังคงเดิม ในตัวอย่างด้านล่าง userEmail และ userId จะยังคงเหมือนเดิม:

     constructor (props) {ซุปเปอร์ (อุปกรณ์ประกอบฉาก)นี้. state = {userName: 'Azat ​​Mardan',userEmail: 'hi @ azat ร่วม'userId: 3967}}updateValues ​​   {นี้. setState ({userName: 'Azat'})}    

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

โปรดจำไว้ว่า setState ทริกเกอร์ render การทำงานในกรณีส่วนใหญ่. forceUpdate แต่ควรหลีกเลี่ยงวิธีนี้เพราะอาศัยข้อมูลภายนอกแทนที่จะทำให้เกิดองค์ประกอบที่เปราะบางและขึ้นอยู่กับปัจจัยภายนอก (coupling แน่น)

ดังที่ได้กล่าวมาแล้วคุณสามารถเข้าถึงอ็อบเจกต์สถานะได้ รัฐ ถ้าคุณจำเราจะส่งค่าด้วยวงเล็บปีกกา ( {} ); กลับ งบ) ให้ใช้ นี้ สถานะ. NAME

เวทมนต์ทำปฏิกิริยาเกิดขึ้นเมื่อคุณใช้ข้อมูลสถานะในมุมมอง (ตัวอย่างเช่นพิมพ์ใน ถ้า / else เป็นค่าของแอตทริบิวต์หรือเป็นค่าคุณสมบัติของเด็ก) จากนั้นให้ setState ค่าใหม่ บูม! ตอบสนองการปรับปรุง HTML สำหรับคุณ คุณสามารถสังเกตได้จากคอนโซล DevTools ของคุณ ควรแสดงรอบของ การปรับปรุง . และ การแสดงผล . และส่วนที่ดีที่สุดคือเฉพาะองค์ประกอบ DOM ขั้นต่ำที่จำเป็นเท่านั้นที่ได้รับผลกระทบ

ผูกนี้ใน JavaScript

ใน JavaScript, นี้ mutates (เปลี่ยนแปลง) ค่าขึ้นอยู่กับตำแหน่งที่เรียกฟังก์ชันจาก เพื่อให้แน่ใจว่า นี้ หมายถึงคลาสขององค์ประกอบของเราเราต้องผูกฟังก์ชันกับบริบทที่เหมาะสม (ค่านี้เป็นคลาสองค์ประกอบของเรา)

ถ้าคุณใช้ ES6 + / ES2015 + เป็น Semalt ทำที่นี่คุณสามารถใช้ไวยากรณ์ฟังก์ชัน arrow arrow เพื่อสร้างฟังก์ชันด้วย autobinding:

     setInterval (   => {นี้. setState ({currentTime: (วันที่ใหม่   ) toLocaleString   })}, 1000)    

การทำ Autobinding หมายความว่าฟังก์ชันที่สร้างขึ้นด้วยธนูไขมันจะได้ค่าปัจจุบัน นี่ ซึ่งในกรณีของเรา นาฬิกา

วิธีการด้วยตนเองคือการใช้ ผูก (นี้) วิธีการในการปิด:

     ฟังก์ชัน    { } ผูก (นี้)    

หรือสำหรับนาฬิกาของเรา

     setInterval (function    {นี้. setState ({currentTime: (วันที่ใหม่   ) toLocaleString   })} ผูกมัด (นี้), 1000)    

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

     var นั่น = นี้var _this = นี้var self = นี้    

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

     var _this = นี้setInterval (ฟังก์ชั่น    {_นี้. setState ({currentTime: (วันที่ใหม่   ) toLocaleString   })}, 1000)    

เรามีนาฬิกาของเราและทำงาน (รูปที่ 2) tadaaa!

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt

ภาพที่ 2: นาฬิกากำลังทำเครื่องหมาย

สิ่งหนึ่งก่อนที่เราจะเดินต่อไป คุณสามารถดูได้ว่า React กำลังใช้องค์ประกอบ DOM

(DOM) เดิมและจะเปลี่ยนเฉพาะข้อความภายใน ไปข้างหน้าและใช้ DevTools เพื่อแก้ไข CSS ขององค์ประกอบนี้ ฉันเพิ่มสไตล์เพื่อทำให้ข้อความเป็นสีฟ้า ( color: blue ) ดังแสดงในรูปที่ 3 สร้างสไตล์แบบอินไลน์ไม่ใช่คลาส องค์ประกอบและรูปแบบอินไลน์แบบใหม่ยังคงเหมือนเดิม (สีน้ำเงิน) เนื่องจากเวลาในการฟ้อง

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt
รูปที่ 3: Semalt อัพเดตเวลาเป็น text ไม่ใช่ div element (เพิ่มด้วยตัวเองสี: blue)

คอนเทนเนอร์

การตอบสนองจะอัปเดตเฉพาะ HTML ภายใน (เนื้อหาของคอนเทนเนอร์

และ องค์ประกอบอื่น ๆ ทั้งหมดในหน้านี้ยังคงเหมือนเดิม เรียบร้อย ;-)

รัฐและทรัพย์สิน

รัฐและสมบัติมีทั้งคุณลักษณะสำหรับคลาสซึ่งหมายความว่า นี้. อุปกรณ์ประกอบฉาก นั่นคือความคล้ายคลึงกันเท่านั้น! หนึ่งในความแตกต่างหลักระหว่างสมบัติและสถานะคืออดีตไม่เปลี่ยนรูปและหลังเป็นสิ่งที่ไม่แน่นอน

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

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

How to Work with and Manipulate State in ReactHow to Work with and Manipulate State in ReactRelated Topics:
ES6Raw Semalt

Semalt 4: ค่าใหม่สำหรับ props และสถานะสามารถเปลี่ยน UI ได้ แต่สำหรับ props ค่าใหม่มาจาก parent และ state จาก component เอง

ส่วนประกอบทั้งหมดไม่จำเป็นต้องมีรัฐ Semalt ดูที่วิธีการใช้คุณสมบัติกับส่วนประกอบไร้สัญชาติ

ส่วนประกอบไร้สัญชาติ

แนวคิดขององค์ประกอบไร้สัญชาติคือองค์ประกอบที่ไม่มีสถานะส่วนประกอบใด ๆ หรือเหตุการณ์หรือวิธีการอื่น ๆ ของ Semalt Lifecycle วัตถุประสงค์ขององค์ประกอบแบบไร้สัญชาติคือทำให้มุมมอง สิ่งเดียวที่สามารถทำได้คือใช้คุณสมบัติและทำอะไรกับพวกเขา - ฟังก์ชันง่ายๆด้วยอินพุท (คุณสมบัติ) และเอาท์พุท (UI element)

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

สคริปต์ Hello Semalt นี้เป็นตัวอย่างที่ดีขององค์ประกอบไร้สัญชาติ (รายการ 4):

     HelloWorld ขยายการตอบสนอง คอมโพเนนต์ {render    {return  

สวัสดี {นี้ อุปกรณ์ประกอบฉาก frameworkName} โลก !!! }}

Semalt 4 (ch03 / hello-js-world-jsx / jsx / สคริปต์ jsx)

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

:

     const HelloWorld = function (props) {return  

สวัสดี {props. frameworkName} โลก !!! }

หมายเหตุ: ใช่ คุณสามารถใช้ฟังก์ชันลูกศร ES6 + / ES2015 + สำหรับองค์ประกอบแบบไร้สัญชาติ ตัวอย่างต่อไปนี้คล้ายคลึงกับตัวอย่างข้างต้น (return สามารถข้ามได้เช่นกัน แต่ฉันชอบที่จะมี):

     const HelloWorld = (props) => {return  

สวัสดี {props. frameworkName} โลก !!! }

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

     ฟังก์ชัน Link (props) {return  {พร็อพเพอร์ตี้ ข้อความ} }ReactDOM แสดงผล (  เอกสาร. href} target = "_ blank" className = "btn btn-primary"> {พร็อพเพอร์ตี้ ข้อความ}     

ในองค์ประกอบไร้สัญชาติเราไม่สามารถมีสถานะได้ แต่เราสามารถมีคุณสมบัติได้สองคุณสมบัติคือ propTypes และ defaultProps เราตั้งไว้บนวัตถุ:

     ฟังก์ชัน Link (props) {return  {พร็อพเพอร์ตี้ ข้อความ} }ลิงค์ propTypes = { . }ลิงค์ defaultProps = { . }    

เราไม่สามารถใช้ข้อมูลอ้างอิง ( refs ) ด้วยฟังก์ชันไร้สัญชาติ ถ้าคุณต้องการใช้ refs คุณสามารถห่อส่วนประกอบไร้สัญชาติในคอมโพเนนต์ React แบบปกติได้

บทสรุป

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

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

March 1, 2018