JavaScript ที่เป็นส่วนหนึ่งของ UI ไม่ควรทำให้แอปฯ ทั้งแอปฯ พัง ซึ่งใน React 16 นั้นมีคอนเซปต์ใหม่ที่เรียกว่า “error boundary” เพื่อแก้ไขปัญหานี้ให้กับผู้ใช้ของ ReactJS Hooks และ ReactJS state เมื่อดู code snippet ที่อยู่ตรงนี้ก็จะเห็นได้ว่ามันคือ React component อีกอันหนึ่งที่ตรวจจับ JavaScript error ที่อยู่ใน child component tree นั่นเอง แล้ว error ที่มันเจอเป็นแบบไหนกันนะ?
ที่จริงแล้ว มันคือ error ทุกอย่างที่เกี่ยวกับ UI นั่นแหละ ถ้าคุณเป็นโปรแกรมเมอร์ที่เขียนโค้ดในหลายๆ ภาษามาก่อน เช่น JavaScript คุณอาจจะคุ้นเคยกับ try/catch ซึ่งฟังก์ชันการ render ของ ReactJS นั้นเป็นแบบ declarative rendering ที่ยากต่อการจัดการกับ error ด้วย try/catch
error boundary ใช้เพื่อหา error ที่อาจเกิดขึ้นด้วยการใช้ try/catch เพื่อดักจับ UI error ทั้งหมดตอนที่กำลัง render อยู่, ใน constructor, และใน life-cycle method ได้ แต่ไม่สามารถตรวจเจอ error ได้ทุกรูปแบบ เช่น error ใน event handler, ใน sync code, ในโค้ดที่ render ไปยังฝั่งเซิร์ฟเวอร์, และแน่นอนว่ารวมถึง error ที่อยู่ใน error boundary component เองด้วย
ใน React 16 นั้น error ที่ไม่โดนดักจับด้วย error boundary ไหนเลยจะส่งผลให้เกิดการ unmount ทั้ง React tree
เหตุผลที่อยู่เบื้องหลังแนวคิดนี้ ได้แก่
– หยุด UI ที่พังไม่ให้แสดงผล
– ส่งฟีดแบ็กที่ดีขึ้นให้กับผู้ใช้เมื่อเกิด error ขึ้น
– เผยให้เห็นบั๊กที่ไม่ทันสังเกต
อย่างที่เราพูดถึงไปก่อนหน้านี้ว่ามันก็คือ React component อีกอันหนึ่ง การนำ error boundary ไปใช้นั้นสามารถทำได้ง่ายๆ ด้วยการเพิ่ม life-cycle function เหล่านี้เข้าไปใน class component ของคุณ
อย่างที่ชื่อของมันบอกอยู่เป็นนัยๆ ว่ามันคือ React component ที่จะทำการหยุดการทำงานของ child component ทุกตัวจากการ render เมื่อมีตัวใดตัวหนึ่งไม่พร้อม ยกตัวอย่างเช่น โค้ดที่ทำงานแบบ dynamic loading หรือการ fetch ข้อมูล เป็นต้น จากนั้นจึงแสดง fallback component ขึ้นมาแทน
เมื่อ React Suspense และ ReactJS state เป็น built-in component อยู่ใน React พวกมันก็จะ render ตามปกติเหมือน component อื่นๆ หากดูที่ render tree จะเห็นว่าเมื่อ parent component ถูก render แล้ว child component ก็จะถูก render ตามไปด้วย
ในกรณีที่ child component ต้องดาวน์โหลดโค้ดหรือข้อมูลบางอย่าง เช่น asynchronous code เจ้า Suspense component จะถูกนำไปใช้เนื่องจาก child component ยังไม่พร้อมที่จะถูก render โดยมันจะโยน Suspense object กลับไปยัง parent component เพื่อหยุดพักการ render เนื่องจาก child component ยังไม่พร้อมใช้งาน
คุณสามารถใช้ React Suspense กับสิ่งต่อไปนี้ได้
React-Query: คือไลบรารีจาก third-party ที่ทำให้ ReactJS และ ReactJS state สามารถบริหารจัดการ state สำหรับ asynchronous data ได้ทุกรูปแบบ การสร้าง query สามารถทำได้ด้วยการกำหนด unique key และฟังก์ชัน asynchronous เพื่อ resolve ข้อมูลด้วยพารามิเตอร์ของ useQuery
ReactJS Hooks คือฟีเจอร์ใหม่ใน React 16.8 ที่ทำให้คุณสามารถใช้ state และฟีเจอร์อื่นๆ ของ React ได้โดยไม่ต้องเขียนคลาสขึ้นมาใหม่
มี ReactJS Hooks API ให้ใช้ถึง 10 ตัว เช่น useState, useEffect, useContext, useCallback, และ useMemo นอกจากนี้ยังมีฟังก์ชันพื้นฐานอย่าง useState และ useEffect ให้ใช้งานด้วย
useState เป็น Hook ที่ทำให้คุณสามารถเพิ่ม ReactJS state ไปยัง functional component ที่เคยเป็นแบบ stateless ให้เป็น stateful ได้
useEffect คือ Hook ที่คุณสามารถใช้เพื่อบอก React ว่า component ของคุณต้องการทำอะไรบางอย่างหลังจากที่ render แล้ว ซึ่งมันจะถูก execute จาก 3 React component lifecycle ได้แก่ componentDidMount, componentDidUpdate, และ componentWillUnmount lifecycle
สรุปก็คือ ReactJS Hooks คือฟังก์ชันที่ทำให้คุณสามารถ ‘hook’ เข้าไปในฟีเจอร์ ReactJS state และ lifecycle จาก functional component ได้ พวกมันเป็น opt-in basis และรองรับเวอร์ชันเก่าได้ 100% ซึ่งประโยชน์หลักๆ ของ ReactJS Hooks คือการนำ stateful logic กลับมาใช้ใหม่
แม้ว่า Hooks จะเป็นสิ่งที่แทนที่คลาสได้ดีกว่า ในแง่ของ logic และ UI ที่สามารถแยกกันได้ง่าย แต่มันไม่ได้แทนที่ความเข้าใจของคุณเกี่ยวกับคอนเซปต์ของ React แต่อย่างใด เพราะมันคือการนำฟีเจอร์ที่มีอยู่มาใช้ในแนวทางที่แตกต่างออกไป หมายความว่าคุณยังต้องทำความคุ้นเคยกับคอนเซปต์พื้นฐานอย่าง props, state (ผ่านทาง ReactJS state), refs, และ lifecycle เพื่อใช้ฟีเจอร์เหล่านี้อยู่ดี
คุณอาจจะต้องระวังสักหน่อยในตอนที่เริ่มสร้างโปรเจกต์ขึ้นมาและวางโครงสร้าง เนื่องจากตอนแรกๆ ยังไม่ค่อยมี requirement อะไรมากนัก แต่โครงสร้างที่วางไว้อย่างหลวมๆ อาจก่อให้เกิดปัญหาตามมาภายหลังได้ เนื่องจากยิ่งเวลาผ่านไป ก็ยิ่งมี requirement เพิ่มมากขึ้น มีหลายปัจจัยที่โครงสร้างของโปรเจกต์อาจทำให้เกิดปัญหาได้ เช่น
ภาพรวมของโปรเจกต์ คือ สิ่งที่คุณจะได้เห็นเมื่อเริ่มต้นโปรเจกต์ใหม่ขึ้นมา
component คือสิ่งที่เป็นอิสระจากส่วนอื่นและเป็นโค้ดชุดหนึ่งที่เน้นเรื่องของ UI ซึ่งสามารถนำกลับมาใช้ใหม่ได้
คุณจะมองมันเป็นเหมือนกับชุดบล็อกตัวต่อก็ได้ ซึ่ง component แบ่งออกเป็นสองประเภท ได้แก่ คลาส และ ฟังก์ชัน
API ทำให้เกิดการโต้ตอบระหว่างซอฟต์แวร์หนึ่งกับอีกซอฟต์แวร์หนึ่ง
container นั้นสนใจแค่การบริหารจัดการข้อมูล ไม่ใช่ UI
Hooks, Hocs, Context – Hook ทำให้คุณสามารถใช้งาน ReactJS state กับฟีเจอร์อื่นๆ ของ React ได้โดยไม่ต้องเขียนคลาส ส่วน higher-order component (HOC) คือเทคนิคขั้นสูงใน React สำหรับการนำ component logic กลับมาใช้ใหม่ ส่วน Context นั้นได้รับการออกแบบมาเพื่อแชร์ข้อมูลที่นับว่าเป็น “global” สำหรับ tree ที่มี component ของ React และ ReactJS state ได้
หลายคนมีคำถามว่า “เราควรวางโครงสร้างโฟลเดอร์ของโปรเจกต์กันอย่างไรดี?” คำตอบคือ ไม่มีใครสามารถตอบคุณได้จริงๆ หรอก เพราะมันขึ้นอยู่กับความชอบและโปรเจกต์ของคุณ มีหลายวิธีที่คุณสามารถวางโครงสร้างโฟลเดอร์ได้ เช่น
แบบทั่วไป: สร้างศูนย์รวมข้อมูลที่เก็บข้อมูลทุกอย่างเอาไว้ในที่เดียว ไม่ว่าคุณจะต้องการอะไรก็หาเจอ
แบบเน้นฟีเจอร์: โครงสร้างทั้งหมดขึ้นอยู่กับฟีเจอร์และไม่ได้พึ่งพากัน รูปแบบนี้นำไปใช้บ่อยสำหรับฟีเจอร์ของโปรดักต์
การนำกลับมาใช้ใหม่: การเลือกโค้ดเพื่อนำกลับมาใช้ใหม่สำหรับโครงสร้างโปรเจกต์แบบทั่วไป เนื่องจากทุกสิ่งทุกอย่างรวมอยู่ในที่เดียวโดยไม่ต้อง refactor โค้ด ในขณะเดียวกัน โครงสร้างแบบเน้นฟีเจอร์ก็มีความเป็นไปได้สูงที่ component ที่จำเป็นต้องถูกนำกลับมาใช้ใหม่อาจซ้ำซ้อนกันได้ เนื่องจากโครงสร้างได้รับการแยกส่วนออกจากกันตามฟีเจอร์ที่แตกต่างกัน จึงจำเป็นต้องมีการ refactor เพื่อหลีกเลี่ยงปัญหาความซ้ำซ้อนกันแบบนี้
การปรับขนาด: การเพิ่มฟีเจอร์ใหม่เข้าไป type จะไม่แตกต่างกันมาก จึงจำเป็นต้องใส่เข้าไปในหลายๆ โฟลเดอร์แบบทั่วไป ส่วนแบบเน้นฟีเจอร์ คุณอาจจะต้องเพิ่มเข้าไปแค่ในโฟลเดอร์ของฟีเจอร์ที่ต้องการ implement เท่านั้น
การดูแลรักษา: ขนาดของโปรเจกต์คือประเด็นสำคัญในการใช้โครงสร้างแบบทั่วไป ถ้าหากโปรเจกต์มีขนาดใหญ่ การวางโครงสร้างแบบทั่วไปอาจไม่ใช่ความคิดที่ดีนัก เนื่องจากการหาไฟล์ที่มีความเฉพาะเจาะจงมากๆ ท่ามกลางไฟล์กว่า 50 ไฟล์ อาจจะยากลำบากเกินไป ข้อดีที่สำคัญของการใช้โครงสร้างแบบเน้นฟีเจอร์คือการดูแลรักษานั้นทำได้ง่าย เนื่องจากโครงสร้างแยกเป็นอิสระออกจากกันตามฟีเจอร์ที่แตกต่างกัน ทำให้สามารถหาไฟล์ที่ต้องการได้ง่ายขึ้น
ทีมงาน senior frontend developer ของเรา มีความเชี่ยวชาญด้านการพัฒนาเว็บไซต์ให้ทันสมัยด้วยเฟรมเวิร์ก JavaScript ที่ได้รับการยอมรับอย่าง React native และ ReactJS
ดูตัวอย่างโค้ดของ ReactJS Hooks, ReactJS state และอื่นๆ ได้ใน วิดีโอแบบเต็มๆ ของเราบน YouTube