Hooks คืออะไร? ทำไมคนเขียน React ควรใช้? | Skooldio Blog
Technology

Hooks คืออะไร ทำไมคนเขียน React ถึงควรเปลี่ยนมาใช้

Hooks คืออะไร  และช่วยแก้ปัญหาอะไร?

ยุคก่อน React Hooks นั้นการเขียนโปรแกรมจะมี 2 แบบหลักๆ คือ Function Component กับ Class Component โดยการเขียนแบบ Function Component แบบเก่านั้นเราจะแค่โยน props เข้าไปแล้ว render ออกมา แต่ไม่สามารถ setState และ setLifeCycle ต่างๆ ได้ ถ้าเราอยาก setState เราจำเป็นที่จะต้องรื้อ Function Component และเปลี่ยนให้เป็น Class Component เพื่อให้สามารถ setState ต่างๆ ได้ ซึ่งการรื้อ Code ก็จำเป็นที่จะต้องใช้แรงพอสมควร

นอกจากนี้การใช้ Life Cycle แบบเก่านั้นค่อนข้างมีความซับซ้อน และไม่เป็นระบบ ทำให้ยากที่จะ reuse Business Logic ที่กระจายอยู่ตาม Life Cycle ต่างๆ  ต้องใช้เทคนิคการ reuse ที่มีความซับซ้อนมากขึ้น เช่น HoC หรือ Render props 

ซึ่งการทำแบบนี้ค่อนข้างกินเวลา และได้ Productivity ต่ำ เพื่อกลบจุดอ่อนนี้ Facebook จึงได้ออก Hooks ออกมา

ข้อดีของ React Hooks

การที่เราเขียน React แบบใช้ Hooks จะช่วยให้เรา

  1. Reuse Component ได้ง่ายขึ้น เนื่องจาก Hooks ได้แยกในส่วนของ Logic และ View ออกจากกัน
  2. Code Clean ขึ้น เนื่องจาก Hooks เปลี่ยนวิธีการจัดการ Life Cycle ที่ยุ่งยาก ให้ง่ายขึ้นกว่าเดิม
  3. ไม่ต้องใช้ this ในการ Bind Class แล้ว เนื่องจากการเขียน Hooks นั้นต้องเขียนบน Function Component เท่านั้น

ตัวอย่างของ code การเปลี่ยน Class Component มาเขียนเป็นแบบ React Hooks

Hooks คืออะไร? ทำไมคนเขียน React ควรใช้? | Skooldio Blog

ซึ่งจะเห็นได้ว่า Code Clean ขึ้นมากกว่าเดิม และความยุ่งยากในการจัดการ State น้อยลง

นอกจากนี้ความพิเศษของ Hooks คือเราสามารถสร้าง Hooks ของตัวเองขึ้นมาใช้งานได้จาก Hooks พื้นฐาน (Primitive Hooks) ที่ React เตรียมไว้ให้ตั้งแต่ version 16.8.0 เป็นต้นไป 

ถ้าหากคุณกำลังรู้สึกว่า React Hooks น่าใช้ แต่ไม่รู้จะเริ่มต้นอย่างไร ? มาเรียนรู้วิธีการเปลี่ยนความยุ่งยากให้เป็นเรื่องง่ายๆ ได้แบบ Best practice ไปกับผู้เชี่ยวชาญตัวจริงคุณปันเจ-ปัญจมพงศ์ เสริมสวัสดิ์ศรี Google Developers Expert สาขา Web Technologies และ C-3PO (Product, Process, Programming) ที่ Cleverse

Hooks คืออะไร? ทำไมคนเขียน React ควรใช้? | Skooldio Blog

จะเขียน React แบบเดิมไปทำไม ลอง React Hooks กัน!

Ref: React: Class Component VS Function Component with Hooks – DEV Community

You may also like

Data

Apache Airflow คืออะไร แล้วทำไมองค์กรชั้นนำส่วนใหญ่ถึงเลือกใช้

Apache Airflow คือ 1 ใน Workflow Management ที่ได้รับความนิยม และองค์กรชั้นนำระดับโลกหลายๆ องค์กรเลือกใช้ โดยเฉพาะอย่างยิ่งในการสร้าง Data Pipelines เพื่อจัดการกับข้อมูลจำนวนมหาศาล ส่วนหนึ่งเพราะองค์กรต่าง ...
8 เหตุผลทำไมควรเขียน Scala
Technology

8 เหตุผลที่ Dev ควรลองเขียนภาษา Scala ตั้งแต่ตอนนี้

เราเคยเกริ่นถึงภาษา Scala ไปบ้างแล้วจากบทความ ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer แต่ในกลุ่มนักพัฒนาหลายคนยังสงสัยว่าภาษา Scala มีความเหมาะไปใช้ในงานแบบไหน? ทำไมถึงต้องหันมาศึกษา ...

More in:Technology

ภาษา Scala คืออะไร Technology

ภาษา Scala มีจุดเด่นอะไร? ทำไมกำลังมาแรงในสาย Developer และ Data Engineer

Scala คือ ภาษา Programming ที่กำลังมาแรงและเริ่มมีความนิยมใช้กันขึ้นเรื่อย ๆ จุดเริ่มต้นภาษา Scala เรียกได้ว่าเป็นลูกอีกคนหนึ่งของภาษา Java เช่นเดียวกับภาษา Kotlin ที่พัฒนาต่อยอดมาเพื่อแก้ไขข้อบกพร่องบางอย่างของภาษา Java ในจุดประสงค์ที่แตกต่างกัน ...
Software Architecture Technology

3 Software Architecture Design ที่นิยมใช้พัฒนาระบบซอฟต์แวร์ขนาดใหญ่

ในการออกแบบซอฟต์แวร์ขนาดใหญ่ในองค์กร มักจะมีการทำงานร่วมกันโดยคนจำนวนมาก หากเราต่างคนต่างเขียนซอฟต์แวร์ไปในทางที่ตัวเองเห็นว่าดี ซอฟต์แวร์ที่แต่ละคนทำก็อาจจะทำงานร่วมกันไม่ได้หรือมีปัญหาตอนที่ Integrate เป็น Solution ใหญ่ ดังนั้น การทำซอฟต์แวร์ในระดับนั้นจึงจำเป็นต้องมีการแบ่งสันปันส่วน และมีการออกแบบ Software Architecture เพื่อให้ทำงานร่วมกันได้ดีและมองเห็นภาพรวมไปในทางเดียวกัน ทั้งระหว่างนักพัฒนาในทีมพัฒนากันเอง ...
Technology

พร้อมแล้วหรือยัง!? ที่จะร่วมเดินทางเข้าสู่มิติคู่ขนาน ผ่านนิทรรศการออนไลน์สุดพิเศษ “Exclusive CO’XI” 

ปฏิเสธไม่ได้เลยกับคำว่า “Multiverse” หรือพหุจักรวาล ต้องเคยผ่านหูผ่านตากันมาบ้าง และอาจ ทำให้ใครหลาย ๆ คนจินตนาการถึงความแปลกใหม่ในอีกจักรวาลที่ขนานกับจักรวาลที่เราอยู่ในปัจจุบัน ซึ่งความแปลกใหม่นั้นอาจจะหมายถึงคน, สิ่งของ และรวมไปถึงนวัตกรรมใหม่ ๆ ที่เราไม่เคยเจอหรือไม่เคยมีมาก่อน เช่นเดียวกันกับ “Exclusive ...

Comments are closed.