เริ่มต้นใช้งาน React Hooks API

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

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

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

React Hook คืออะไร?

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

• ปรับปรุงการใช้รหัสซ้ำ;
• องค์ประกอบโค้ดที่ดีขึ้น
• ค่าเริ่มต้นที่ดีกว่า;
• การแบ่งปันตรรกะที่มองไม่เห็นด้วยการใช้ hooks แบบกำหนดเอง
• ความยืดหยุ่นในการเลื่อนขึ้นและลงโครงสร้าง components

ด้วย React Hooks นักพัฒนาจะได้รับพลังในการใช้ส่วนประกอบที่ใช้งานได้สำหรับเกือบทุกอย่างที่พวกเขาต้องทำ ตั้งแต่การเรนเดอร์ UI ไปจนถึงการจัดการสถานะและตรรกะ ซึ่งค่อนข้างเรียบร้อย

แรงจูงใจเบื้องหลังการเปิดตัว React Hooks

ตามเอกสารอย่างเป็นทางการของ ReactJS ต่อไปนี้คือแรงจูงใจเบื้องหลังการเปิดตัว React Hooks:

• การนำตรรกะ stateful มาใช้ซ้ำระหว่างส่วนประกอบต่างๆ เป็นเรื่องยาก
  ด้วย Hooks คุณสามารถใช้ตรรกะซ้ำระหว่างส่วนประกอบของคุณโดยไม่ต้องเปลี่ยนสถาปัตยกรรมหรือโครงสร้าง
• องค์ประกอบที่ซับซ้อนอาจเข้าใจได้ยาก
  เมื่อส่วนประกอบมีขนาดใหญ่ขึ้นและดำเนินการหลายอย่าง ก็จะกลายเป็นเรื่องยากที่จะเข้าใจในระยะยาว Hooks แก้ปัญหานี้โดยอนุญาตให้คุณแยกส่วนประกอบเดียวออกเป็นฟังก์ชันย่อยต่างๆ ตามส่วนที่เกี่ยวข้องของส่วนประกอบที่แยกจากกัน (เช่น การตั้งค่าการสมัครรับข้อมูลหรือการดึงข้อมูล) แทนที่จะต้องบังคับให้แยกตามวิธีวงจรชีวิต
• ชั้นเรียนค่อนข้างสับสน
  ชั้นเรียนเป็นอุปสรรคต่อการเรียนรู้ React อย่างถูกต้อง คุณจะต้องเข้าใจว่า this ใน JavaScript ทำงานอย่างไรซึ่งแตกต่างจากภาษาอื่น React Hooks แก้ปัญหานี้โดยอนุญาตให้นักพัฒนาใช้ฟีเจอร์ React ที่ดีที่สุดโดยไม่ต้องใช้คลาส
  

กฎของตะขอ

มีกฎหลักสองข้อที่ต้องปฏิบัติตามอย่างเคร่งครัดตามที่ระบุไว้โดยทีมงานหลักของ React ซึ่งระบุไว้ในเอกสารข้อเสนอขอเกี่ยว

• ตรวจสอบให้แน่ใจว่าไม่ได้ใช้ Hooks ในลูป เงื่อนไข หรือฟังก์ชันที่ซ้อนกัน
• ใช้ Hooks จากภายใน React Functions เท่านั้น

ตะขอตอบโต้พื้นฐาน

มีตะขอในตัว 10 ตัวที่มาพร้อมกับ React 16.8 แต่ตะขอพื้นฐาน (ที่ใช้กันทั่วไป) ประกอบด้วย:

• useState()
• useEffect()
• useContext()
• useReducer()

นี่คือ 4 hooks พื้นฐานที่นักพัฒนา React มักใช้ซึ่งได้นำ React Hooks มาใช้ใน codebases

useState()

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

 function App() { const [age, setAge] = useState(19); const handleClick = () => setAge(age + 1) return <div> I am {age} Years Old <div> <button onClick={handleClick}>Increase my age! </button> </div> </div> }

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

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

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

useEffect()

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

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

โดยค่าเริ่มต้น เอฟเฟกต์จะดำเนินการส่วนใหญ่หลังจากการเรนเดอร์เสร็จสิ้น แต่คุณมีตัวเลือกที่จะเริ่มทำงานเมื่อค่าบางอย่างเปลี่ยนแปลง

การใช้งาน useEffect() เป็นส่วนใหญ่สำหรับผลข้างเคียงที่มักจะใช้สำหรับการโต้ตอบกับ Browser/DOM ​​API หรือการดึงข้อมูลหรือการสมัครรับข้อมูลเหมือน API ภายนอก นอกจากนี้ หากคุณคุ้นเคยกับวิธีการทำงานของ React lifecycle แล้ว คุณยังสามารถคิดว่า useEffect() hook เป็น ส่วนประกอบ ที่เมาท์ อัปเดต และ ยกเลิก การต่อเชื่อม ซึ่งทั้งหมดนี้รวมอยู่ในฟังก์ชันเดียว ช่วยให้เราสามารถจำลองวิธีวงจรชีวิตในส่วนประกอบที่ใช้งานได้

เราจะใช้ข้อมูลโค้ดด้านล่างเพื่ออธิบายวิธีพื้นฐานที่สุดที่เราสามารถทำได้โดยใช้ useEffect()

ขั้นตอนที่ 1: กำหนดสถานะการสมัครของคุณ

 import React, {useState} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

เช่นเดียวกับที่เราพูดถึงในหัวข้อก่อนหน้านี้เกี่ยวกับวิธีใช้ useState() hook เพื่อจัดการสถานะภายในองค์ประกอบการทำงาน เราใช้มันในข้อมูลโค้ดของเราเพื่อตั้งค่าสถานะสำหรับแอปของเราที่แสดงชื่อเต็มของฉัน

ขั้นตอนที่ 2: เรียก useEffect Hook

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({FirstName: 'Shedrack', surname: 'Akintayo'}) }, [])//pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

ตอนนี้เราได้นำเข้า useEffect hook และยังใช้ useEffect() เพื่อกำหนดสถานะของคุณสมบัติชื่อและนามสกุลของเราซึ่งค่อนข้างเรียบร้อยและรัดกุม

คุณอาจสังเกตเห็น useEffect hook ในอาร์กิวเมนต์ที่สองซึ่งเป็นอาร์เรย์ว่าง เนื่องจากมีการเรียกไปยัง setFullName ซึ่งไม่มีรายการการขึ้นต่อกัน การผ่านอาร์กิวเมนต์ที่สองจะป้องกันไม่ให้มีการอัพเดตต่อเนื่อง ( componentDidUpdate() ) และยังช่วยให้ useEffect() ของเราทำหน้าที่เป็นเมธอด componentDidMount และแสดงผลครั้งเดียวโดยไม่ต้องแสดงผลการเปลี่ยนแปลงในทรีอีกครั้ง

แอป React ของเราควรมีลักษณะดังนี้:

นอกจากนี้เรายังสามารถใช้ change the title properties ของแอปพลิเคชันของเราภายใน useEffect() ได้โดยการเรียกใช้ setTitle() เช่น:

 import React, {useState, useEffect} from 'react'; function App() { //Define State const [name, setName] = useState({firstName: 'name', surname: 'surname'}); const [title, setTitle] = useState('BIO'); //Call the use effect hook useEffect(() => { setName({firstName: 'Shedrack', surname: 'Akintayo'}) setTitle({'My Full Name'}) //Set Title }, [])// pass in an empty array as a second argument return( <div> <h1>Title: {title}</h1> <h3>Name: {name.firstName}</h3> <h3>Surname: {name.surname}</h3> </div> ); }; export default App

ตอนนี้หลังจากที่แอปพลิเคชันของเราแสดงผลใหม่แล้ว ก็จะแสดงชื่อใหม่

useContext()

useContext() ยอมรับวัตถุบริบท เช่น ค่าที่ส่งคืนจาก React.createContext แล้วส่งกลับค่าบริบทปัจจุบันสำหรับบริบทนั้น

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

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

ข้อมูลโค้ดด้านล่างจะแสดงให้เห็นว่า Context API ทำงานอย่างไรและ useContext Hook ช่วยให้ดีขึ้นได้อย่างไร

วิธีปกติในการใช้ Context API

 import React from "react"; import ReactDOM from "react-dom"; const NumberContext = React.createContext(); function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); } function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

ตอนนี้ เรามาแยกย่อยข้อมูลโค้ดและอธิบายแต่ละแนวคิดกัน

ด้านล่างนี้ เรากำลังสร้างบริบทที่เรียกว่า NumberContext มีไว้เพื่อส่งคืนวัตถุด้วยสองค่า: { Provider, Consumer }

 const NumberContext = React.createContext();

จากนั้นเราใช้ค่าของ Provider ที่ส่งคืนจาก NumberContext ที่เราสร้างขึ้นเพื่อให้ค่าเฉพาะใช้ได้กับเด็กทุกคน

 function App() { return ( <NumberContext.Provider value={45}> <div> <Display /> </div> </NumberContext.Provider> ); }

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

 function Display() { return ( <NumberContext.Consumer> {value => <div>The answer to the question is {value}.</div>} </NumberContext.Consumer> ); } ReactDOM.render(<App />, document.querySelector("#root"));

สังเกตว่าเราสามารถรับค่าจากองค์ประกอบ App ไปยังองค์ประกอบ Display ได้อย่างไรโดยห่อเนื้อหาของเราใน NumberContext.Consumer และใช้วิธีอุปกรณ์ประกอบฉากการเรนเดอร์เพื่อดึงค่าและแสดงผล

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

การใช้เมธอด useContext

เพื่ออธิบายเมธอด useContext เราจะเขียนองค์ประกอบ Display ใหม่โดยใช้ตะขอ useContext

 // import useContext (or we could write React.useContext) import React, { useContext } from 'react'; // old code goes here function Display() { const value = useContext(NumberContext); return <div>The answer is {value}.</div>; }

นั่นคือทั้งหมดที่เราต้องทำเพื่อแสดงคุณค่าของเรา สวยเรียบร้อยใช่มั้ย? คุณเรียก useContext() hook และส่งผ่านในบริบทวัตถุที่เราสร้างขึ้นและเราคว้าค่าจากมัน

หมายเหตุ: อย่าลืมว่าอาร์กิวเมนต์ที่ส่งผ่านไปยัง useContext hook ต้องเป็นออบเจ็กต์บริบทเอง และส่วนประกอบใดๆ ที่เรียก useContext จะแสดงซ้ำเสมอเมื่อค่าบริบทเปลี่ยนแปลง

useReducer()

ตะขอ useReducer ใช้สำหรับจัดการสถานะที่ซับซ้อนและช่วงการเปลี่ยนภาพในสถานะ ใช้ฟังก์ชัน reducer และอินพุตสถานะเริ่มต้น จากนั้นจะส่งกลับสถานะปัจจุบันและฟังก์ชันการ dispatch เป็นเอาต์พุตโดยใช้การทำลายอาร์เรย์

รหัสด้านล่างเป็นไวยากรณ์ที่เหมาะสมสำหรับการใช้ useReducer hook

 const [state, dispatch] = useReducer(reducer, initialArg, init);

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

มีตะขอตอบสนองอื่น ๆ

ตะขอตอบสนองแบบกำหนดเอง

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

ข้อมูลโค้ดด้านล่างแสดงตัวอย่าง React Hook แบบกำหนดเองสำหรับการเลื่อนแบบไม่มีที่สิ้นสุด (โดย Paulo Levy):

 import { useState } from "react"; export const useInfiniteScroll = (start = 30, pace = 10) => { const [limit, setLimit] = useState(start); window.onscroll = () => { if ( window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight ) { setLimit(limit + pace); } }; return limit; };

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

ดังนั้นเพื่อใช้ Hook นี้ภายในแอป React เราจะใช้กับ API ออนไลน์ที่ส่งคืนข้อมูล 'ปลอม':

 import React, { useState, useEffect } from "react"; import { useInfiniteScroll } from "./useInfiniteScroll"; const App = () => { let infiniteScroll = useInfiniteScroll(); const [tableContent, setTableContent] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/") .then(response => response.json()) .then(json => setTableContent(json)); }, []); return ( <div style={{ textAlign: "center" }}> <table> <thead> <tr> <th>User ID</th> <th>Title</th> </tr> </thead> <tbody> {tableContent.slice(0, infiniteScroll).map(content => { return ( <tr key={content.id}> <td style={{ paddingTop: "10px" }}>{content.userId}</td> <td style={{ paddingTop: "10px" }}>{content.title}</td> </tr> ); })} </tbody> </table> </div> ); }; export default App;

รหัสด้านบนจะแสดงรายการข้อมูลปลอม ( userID ผู้ใช้และ title ) ที่ใช้ scroll hook ที่ไม่มีที่สิ้นสุดเพื่อแสดงจำนวนข้อมูลเริ่มต้นบนหน้าจอ

บทสรุป

ฉันหวังว่าคุณจะสนุกกับการทำงานผ่านบทช่วยสอนนี้ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ React Hooks ได้จากข้อมูลอ้างอิงด้านล่าง

หากคุณมีคำถามใดๆ คุณสามารถฝากไว้ในส่วนความคิดเห็น และเรายินดีที่จะตอบทุกคำถาม!

repo ที่สนับสนุนสำหรับบทความนี้มีอยู่ใน Github

แหล่งข้อมูลและการอ่านเพิ่มเติม

• “การอ้างอิง Hooks API” React.js Docs
• “React Hooks คืออะไร” Robin Wieruch
• “How The useContext Hook Works” Dave Ceddia
• “React Hooks: วิธีใช้ useEffect() ” Hossein Ahmadi จาก Medium
• “การเขียน React Hooks ของคุณเอง” Aayush Jaiswal, Medium
• "ง่ายต่อการทำความเข้าใจสูตร React Hook" Gabe Ragland, useHooks ()