บทนำสู่ปฏิกิริยา ตอนที่ 1

เราได้พูดไปแล้วในบล็อกนี้เกี่ยวกับกองการพัฒนาใหม่ของ WordPress และการปฏิวัติที่มาพร้อมกับมัน ทั้งสำหรับตัวแพลตฟอร์มเองและสำหรับนักพัฒนาที่ตอนนี้ถูกบังคับให้เรียนรู้สิ่งใหม่ ตัวอย่างเช่น เมื่อไม่นานมานี้ ฉันเผยแพร่โพสต์ที่อธิบายวิธีใช้แพ็คเกจ @wordpress/scripts เพื่อขยาย Gutenberg และเพิ่มปุ่มใน UI ในฐานะนักเขียน ฉันชอบเขียนบทช่วยสอนเพราะฉันสามารถแบ่งปันบางสิ่งที่ฉันรู้ดีและรู้สึกว่าเราสามารถเรียนรู้ร่วมกันได้

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

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

ฟังก์ชั่นการเขียนโปรแกรม

ก่อนที่จะพูดถึง React ฉันคิดว่ามันคุ้มค่าที่จะใช้เวลาสองสามนาทีพูดคุยเกี่ยวกับ functional programming เนื่องจากกรอบงานจำนวนมากที่เราใช้อยู่ในปัจจุบันขึ้นอยู่กับหลักการของมัน และ React (พร้อมกับ Redux) ก็ไม่มีข้อยกเว้น

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

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

แล้วอะไรที่ทำให้ Functional Programming พิเศษ? มีหลายแง่มุมที่อธิบายลักษณะการเขียนโปรแกรมเชิงฟังก์ชัน: ฟังก์ชันบริสุทธิ์ ความโปร่งใสในการอ้างอิง การไม่เปลี่ยนรูป ฟังก์ชันเป็นพลเมืองอันดับหนึ่ง ฟังก์ชันระดับสูง ฯลฯ และฉันแนะนำให้คุณศึกษาด้วยตนเอง (หรือ ถ้าคุณต้องการฉัน ถึงเราจะพูดถึงพวกเขาในโพสต์ต่อๆ ไป) แต่เพื่อให้โพสต์นี้สั้น วันนี้เราจะเน้นที่คุณสมบัติเดียว...

ฟังก์ชั่นเพียว

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

1. มันให้ผลลัพธ์เดียวกันเสมอเมื่อได้รับอาร์กิวเมนต์เดียวกัน
2. ไม่มีผลข้างเคียง

ตัวอย่างเช่น นี่ไม่ใช่ฟังก์ชันบริสุทธิ์:

 let previousName = 'David'; function greet( name ) { if ( previousName !== name ) { console.log( `Hello, ${ name }!` ); } else { console.log( `Welcome back, ${ name }!` ); } previousName = name; }

เพราะมันมีผลข้างเคียงหลายอย่าง กล่าวคือจะแก้ไขตัวแปรส่วนกลาง (ผลข้างเคียง 1) และแสดงข้อความบางส่วนไปยังคอนโซล (ผลข้างเคียง 2)

ฟังก์ชันที่ไม่บริสุทธิ์อีกประการหนึ่งมีดังต่อไปนี้:

 function createElement( name ) { const id = Math.random(); return { id, name }; }

เพราะอย่างที่คุณเห็น มันไม่ได้ให้ผลลัพธ์แบบเดียวกันเสมอไป ทุกครั้งที่เรียกใช้ createElement ด้วยชื่อใดชื่อหนึ่ง ผลลัพธ์ที่ได้จะแตกต่างกัน หลังจากที่ทุก id คุณลักษณะถูกสร้างขึ้นผ่าน Math.random …

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

ส่วนประกอบใน React

Pure Functions และ Functional Programming ต้องทำอย่างไรบ้าง? มาดูกันว่าเราจะได้รับความสัมพันธ์ของพวกเขาหรือไม่…

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

 class ShoppingList extends React.Component { render() { return ( <div className="shopping-list"> <h1>Shopping List for { this.props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } }

ค่อนข้างเรียบง่ายและเข้าใจได้ง่ายใช่ไหม

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

ใช่คุณพูดถูก มันดูไม่ดีเลย... เราเสียเวลาไปกับการพูดถึงการเขียนโปรแกรมเชิงฟังก์ชันหรือเปล่า?

ดูองค์ประกอบก่อนหน้าอีกครั้ง มันดูเหมือนอะไร? มันทำอะไร? มันเป็นคลาสที่มีเมธอดเดียว ( render ) ที่สร้าง HTML บางส่วนเพื่อแสดงรายการช้อปปิ้ง รายการซื้อของนี้เหมือนกันเสมอ (เป็นตัวอย่างง่ายๆ) แต่มีส่วนตัวแปรหนึ่งส่วน: ชื่อซึ่งคลาสดูเหมือนจะใช้คุณสมบัติภายใน this.props.name

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

1. ส่วนประกอบสามารถรับ "ชื่อ" เราไม่รู้แน่ชัดว่าชื่อนี้มาได้อย่างไร แต่เรารู้ว่าชื่อนี้มาจากอะไร this.props.name ก็เป็นเงื่อนงำที่ดีทีเดียว
2. วิธีการ render นเดอร์สร้าง HTML บางส่วนเพื่อแสดงรายการ (คงที่) ของ "องค์ประกอบการช็อปปิ้ง": Instagram , WhatsApp และ Oculus
3. HTML ที่เป็นผลลัพธ์ไม่คงที่ 100% ใช้ "ชื่อ" ที่สามารถเปลี่ยนแปลงได้ตามมูลค่าของทรัพย์สิน

ดูว่าฉันกำลังจะไปไหน

ฟังก์ชัน ส่วนประกอบ ใน React

เราเพิ่งอธิบายฟังก์ชันที่บริสุทธิ์! เรามีส่วนประกอบที่ใช้ค่า ( name ) และสร้างผลลัพธ์ที่กำหนดไว้อย่างดี (HTML) นี่หมายความว่าเราสามารถย้ายออกจาก OOP และใช้องค์ประกอบก่อนหน้าเป็นฟังก์ชันได้หรือไม่

แน่นอน! คลาสที่ซับซ้อนเกินไปที่เราเพิ่งเห็นสามารถเขียนใหม่เป็นฟังก์ชันบริสุทธิ์ที่ง่ายกว่าและเข้าใจง่ายกว่าซึ่งรับ props และส่งคืน HTML:

 const ShoppingList = ( props ) => ( <div className="shopping-list"> <h1>Shopping List for { props.name }</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> );

นี่เป็นสิ่งเดียวกันกับที่เรามี แต่วิธีที่ง่ายกว่า ฉันยังกล้าที่จะบอกว่ามันเป็นสิ่งที่ง่ายที่สุดที่ฉันสามารถนำมาใช้ในฐานะโปรแกรมเมอร์: องค์ประกอบ React ไม่มีอะไรมากไปกว่าฟังก์ชันที่รับอุปกรณ์ประกอบฉากและสร้าง HTML out

และนี่คือบทเรียนแรกที่คุณต้องเรียนรู้อย่างแม่นยำ: องค์ประกอบ React ของคุณเป็นฟังก์ชันล้วนๆ : props in, HTML out คอมโพเนนต์ต้องไม่เรียกใช้ฟังก์ชันแบบอะซิงโครนัสเพื่อดึงข้อมูล (เนื่องจากเป็นผลข้างเคียง) ส่วนประกอบไม่สามารถแก้ไขคุณสมบัติที่ได้รับ (ไม่เปลี่ยนรูป)

อีกครั้งหนึ่ง: ส่วนประกอบเพียงแค่ใช้อุปกรณ์ประกอบฉากและสร้างผลลัพธ์ HTML ระยะเวลา.

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

ภาพเด่นโดย Josiah Weiss บน Unsplash