portaldacalheta.pt
  • หลัก
  • การจัดการวิศวกรรม
  • บุคลากรและทีมงานของผลิตภัณฑ์
  • อื่น ๆ
  • นวัตกรรม
เทคโนโลยี

การทำงานกับ React Hooks และ TypeScript



Hooks ได้รับการแนะนำให้รู้จักกับ React ในเดือนกุมภาพันธ์ 2019 เพื่อปรับปรุงการอ่านโค้ด เราได้พูดถึง React hooks แล้ว บทความก่อนหน้านี้ แต่คราวนี้เรากำลังตรวจสอบว่า hooks ทำงานกับ TypeScript อย่างไร

อธิบายว่าการออกแบบมีความสำคัญต่อเนื้อหาอย่างไร

ก่อนที่จะมีตะขอส่วนประกอบของปฏิกิริยาเคยมีสองรสชาติ:



  • ชั้นเรียน ที่จัดการกับสถานะ
  • ฟังก์ชั่น ที่กำหนดโดยอุปกรณ์ประกอบฉาก

การใช้สิ่งเหล่านี้อย่างเป็นธรรมชาติเพื่อสร้างความซับซ้อน ส่วนประกอบภาชนะ ด้วยชั้นเรียนและเรียบง่าย การนำเสนอ ส่วนประกอบที่มีฟังก์ชั่นบริสุทธิ์



React Hooks คืออะไร?

ส่วนประกอบคอนเทนเนอร์จัดการการจัดการสถานะและการร้องขอไปยังเซิร์ฟเวอร์ซึ่งจะถูกเรียกในบทความนี้ ผลข้างเคียง . รัฐจะแพร่กระจายไปยังเด็กคอนเทนเนอร์ผ่านอุปกรณ์ประกอบฉาก



React Hooks คืออะไร?

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



การอัปเกรดส่วนประกอบที่ใช้งานได้เป็นอย่างชาญฉลาดนั้นไม่ใช่เรื่องที่น่าเจ็บปวด แต่เป็นงานที่ใช้เวลานานและไม่พึงประสงค์ ยิ่งไปกว่านั้นการแยกแยะผู้นำเสนอและคอนเทนเนอร์ อย่างเคร่งครัด ไม่ต้อนรับอีกต่อไป

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



// put signature in local state and toggle signature when signed changes function QuotationSignature({quotation}) { const [signed, setSigned] = useState(quotation.signed); useEffect(() => { fetchPost(`quotation/${quotation.number}/sign`) }, [signed]); // effect will be fired when signed changes return {setSigned(!signed)}}/> Signature }

มีโบนัสใหญ่สำหรับสิ่งนี้ - การเข้ารหัสด้วย TypeScript ดีมากกับ Angular แต่ป่องด้วย React อย่างไรก็ตามการเข้ารหัส ตอบสนอง hooks ด้วย TypeScript เป็นประสบการณ์ที่น่าพอใจ

TypeScript พร้อม Old React

TypeScript ได้รับการออกแบบโดย Microsoft และเป็นไปตามเส้นทาง Angular เมื่อ React พัฒนาขึ้น ไหล ซึ่งตอนนี้กำลังสูญเสียแรงฉุด การเขียนคลาส React ด้วย TypeScript ที่ไร้เดียงสานั้นค่อนข้างเจ็บปวดเพราะ ตอบสนองนักพัฒนา ต้องพิมพ์ทั้งสอง props และ state แม้ว่าจะมีหลายปุ่มเหมือนกัน



นี่คือวัตถุโดเมนง่ายๆ เราทำไฟล์ แอพใบเสนอราคา , ด้วย Quotation ประเภทจัดการในส่วนประกอบ crud บางส่วนที่มีสถานะและอุปกรณ์ประกอบฉาก Quotation สามารถสร้างได้และสถานะที่เกี่ยวข้องสามารถเปลี่ยนเป็นเซ็นหรือไม่ก็ได้

interface Quotation{ id: number title:string; lines:QuotationLine[] price: number } interface QuotationState{ readonly quotation:Quotation; signed: boolean } interface QuotationProps{ quotation:Quotation; } class QuotationPage extends Component { // ... }

แต่ลองนึกภาพ QuotationPage ตอนนี้จะขอไฟล์ id : ตัวอย่างเช่นใบเสนอราคา 678 ที่จัดทำโดย บริษัท นั่นหมายความว่า QuotationProps ไม่ทราบตัวเลขที่สำคัญนั่นไม่ใช่การตัดใบเสนอราคา เป๊ะ . เราต้องประกาศรหัสเพิ่มเติมอีกมากมายในอินเทอร์เฟซ QuotationProps:



interface QuotationProps{ // ... all the attributes of Quotation but id title:string; lines:QuotationLine[] price: number }

เราคัดลอกแอตทริบิวต์ทั้งหมดยกเว้น id ในประเภทใหม่ หืม นั่นทำให้ฉันนึกถึง Java แบบเก่าซึ่งเกี่ยวข้องกับการเขียน DTO จำนวนมาก เพื่อเอาชนะสิ่งนั้นเราจะเพิ่มความรู้ TypeScript ของเราเพื่อหลีกเลี่ยงความเจ็บปวด

ประโยชน์ของ TypeScript พร้อม Hooks

ด้วยการใช้ตะขอเราจะสามารถกำจัดอินเทอร์เฟซ QuotationState ก่อนหน้านี้ได้ ในการทำเช่นนี้เราจะแบ่ง QuotationState ออกเป็นสองส่วนที่แตกต่างกันของรัฐ



interface QuotationProps{ quotation:Quotation; } function QuotationPage({quotation}:QuotationProps){ const [quotation, setQuotation] = useState(quotation); const [signed, setSigned] = useState(false); }

เราไม่จำเป็นต้องสร้างอินเทอร์เฟซใหม่ด้วยการแยกสถานะ ประเภทของรัฐในพื้นที่มักจะอนุมานโดยค่าสถานะเริ่มต้น

ส่วนประกอบที่มีตะขอเป็นฟังก์ชันทั้งหมด ดังนั้นเราสามารถเขียนส่วนประกอบเดียวกันที่ส่งคืน FC

const QuotationPage : FC = ({quotation}) => { const [quotation, setQuotation] = useState(quotation); const [signed, setSigned] = useState(false); } 

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

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

คุณสมบัติเฉพาะของ TypeScript เหมาะสำหรับ Hooks

ในตัวอย่าง TypeScript ของ React hooks ก่อนหน้านี้ฉันยังมีแอตทริบิวต์ number ใน QuotationProps แต่ยังไม่มีเงื่อนงำว่าแท้จริงแล้วตัวเลขนั้นคืออะไร

TypeScript ให้รายการไฟล์ ประเภทยูทิลิตี้ และสามคนจะช่วยเราในการตอบสนองโดยการลดเสียงรบกวนของคำอธิบายอินเทอร์เฟซจำนวนมาก

  • Partial : ปุ่มย่อยใด ๆ ของ T
  • Omit : คีย์ทั้งหมดของ T ยกเว้นคีย์ x
  • Pick : ตรง x, y, z คีย์จาก T

คุณสมบัติเฉพาะของ TypeScript เหมาะสำหรับ Hooks

ในกรณีของเราเราต้องการ Omit เพื่อละเว้น id ของใบเสนอราคา เราสามารถสร้างรูปแบบใหม่ได้ทันทีด้วย type คำสำคัญ.

Partial และ Omit ไม่มีอยู่ในภาษาพิมพ์ส่วนใหญ่เช่น Java แต่ช่วยได้มากสำหรับตัวอย่างด้วย Forms ในการพัฒนาส่วนหน้า ช่วยลดความยุ่งยากในการพิมพ์

type QuotationProps= Omit; function QuotationPage({quotation}:QuotationProps){ const [quotation, setQuotation] = useState(quotation); const [signed, setSigned] = useState(false); // ... }

ตอนนี้เรามีใบเสนอราคาที่ไม่มีรหัส ดังนั้นบางทีเราอาจออกแบบ Quotation และ PersistedQuotation extends Quotation. นอกจากนี้เราจะแก้ไขปัญหาซ้ำ if ได้อย่างง่ายดาย หรือ undefined ปัญหา. เรายังควรเรียกคำพูดของตัวแปรแม้ว่ามันจะไม่ใช่วัตถุเต็ม? ซึ่งอยู่นอกเหนือขอบเขตของบทความนี้ แต่เราจะกล่าวถึงในภายหลัง

อย่างไรก็ตามตอนนี้เรามั่นใจแล้วว่าเราจะไม่แพร่กระจายวัตถุที่เราคิดว่ามี number ใช้ Partial ไม่ได้นำการค้ำประกันเหล่านี้ทั้งหมดมาใช้ดังนั้นโปรดใช้ดุลยพินิจ

Pick เป็นอีกวิธีหนึ่งในการประกาศประเภทได้ทันทีโดยไม่ต้องมีการประกาศอินเทอร์เฟซใหม่ หากส่วนประกอบเพียงแก้ไขชื่อใบเสนอราคา:

type QuoteEditFormProps= Pick

หรือเพียงแค่:

function QuotationNameEditor({id, title}:Pick){ ...}

อย่าตัดสินฉันฉันเป็นแฟนตัวยงของ Domain Driven Design ฉันไม่ขี้เกียจถึงขนาดที่ว่าฉันไม่ต้องการเขียนเพิ่มอีกสองบรรทัดสำหรับอินเทอร์เฟซใหม่ ฉันใช้อินเทอร์เฟซสำหรับการอธิบายชื่อโดเมนอย่างแม่นยำและฟังก์ชันยูทิลิตี้เหล่านี้เพื่อความถูกต้องของรหัสในเครื่องโดยหลีกเลี่ยงเสียงรบกวน ผู้อ่านจะรู้ว่า Quotation คืออินเทอร์เฟซมาตรฐาน

ประโยชน์อื่น ๆ ของ React Hooks

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

interface Place{ city:string, country:string } const initialState:Place = { city: 'Rosebud', country: 'USA' }; function reducer(state:Place, action):Partial { switch (action.type) { case 'city': return { city: action.payload }; case 'country': return { country: action.payload }; } } function PlaceForm() { const [state, dispatch] = useReducer(reducer, initialState); return ( { dispatch({ type: 'city',payload: event.target.value}) }} value={state.city} /> { dispatch({type: 'country', payload: event.target.value }) }} value={state.country} /> ); }

นี่คือกรณีที่ใช้ Partial ปลอดภัยและเป็นทางเลือกที่ดี

แม้ว่าฟังก์ชันสามารถเรียกใช้งานได้หลายครั้ง แต่ฟังก์ชัน useReducer ที่เกี่ยวข้อง เบ็ดจะถูกสร้างขึ้นเพียงครั้งเดียว

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

สิ่งนี้ดีกว่าอย่างชัดเจนสำหรับความสามารถในการทดสอบ - ฟังก์ชันบางอย่างจัดการกับ JSX, อื่น ๆ ที่มีพฤติกรรม, อื่น ๆ ที่มีตรรกะทางธุรกิจและอื่น ๆ

คุณ (เกือบ) ไม่จำเป็นต้องใช้ส่วนประกอบที่สูงขึ้นอีกต่อไป รูปแบบอุปกรณ์แสดงผลนั้นง่ายกว่าในการเขียนด้วยฟังก์ชัน

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

TypeScript ยังคงเป็น JavaScript

JavaScript เป็นเรื่องสนุกเพราะคุณสามารถฉีกโค้ดของคุณได้ทุกทิศทาง ด้วย TypeScript คุณยังสามารถใช้ keyof เพื่อเล่นกับกุญแจของวัตถุ คุณสามารถใช้ยูเนี่ยนประเภทเพื่อสร้างสิ่งที่อ่านไม่ได้และไม่สามารถเข้าถึงได้ - ไม่ฉันไม่ชอบสิ่งเหล่านั้น คุณสามารถใช้นามแฝงประเภทเพื่อหลอกว่าสตริงเป็น UUID

แต่คุณสามารถทำได้อย่างปลอดภัย ให้แน่ใจว่า tsconfig.json ของคุณ มี 'strict':true ตัวเลือก ตรวจสอบก่อนเริ่มโครงการไม่เช่นนั้นคุณจะต้อง refactor เกือบทุกบรรทัด!

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

นอกจากนี้คุณยังสามารถสร้างข้อผิดพลาดรันไทม์ได้! TypeScript นั้นง่ายกว่า Java และหลีกเลี่ยงปัญหาความแปรปรวนร่วม / ความขัดแย้งด้วย Generics

ใน ตัวอย่างสัตว์ / แมวนี้ เรามีรายการสัตว์ที่เหมือนกับรายการแมว น่าเสียดายที่มันเป็นสัญญาในบรรทัดแรกไม่ใช่ที่สอง จากนั้นเราเพิ่มเป็ดในรายการสัตว์ดังนั้นรายชื่อแมวจึงเป็นเท็จ

interface Animal {} interface Cat extends Animal { meow: () => string; } const duck = {age: 7}; const felix = { age: 12, meow: () => 'Meow' }; const listOfAnimals: Animal[] = [duck]; const listOfCats: Cat[] = [felix]; function MyApp() { const [cats , setCats] = useState(listOfCats); // Here the thing: listOfCats is declared as a Animal[] const [animals , setAnimals] = useState(listOfCats) const [animal , setAnimal] = useState(duck) return { animals.unshift(animal) // we set as first cat a duck ! setAnimals([...animals]) // dirty forceUpdate } }> The first cat says {cats[0].meow()} ; }

TypeScript มีเพียงไฟล์ ไบวาเรียน แนวทางสำหรับ generics ที่เรียบง่ายและช่วยให้นักพัฒนา JavaScript นำไปใช้ หากคุณตั้งชื่อตัวแปรอย่างถูกต้องคุณจะไม่ค่อยเพิ่ม duck ถึง a listOfCats.

.hpp กับ .cpp

นอกจากนี้ยังมีข้อเสนอสำหรับการเพิ่ม สัญญาเข้าและออก สำหรับความแปรปรวนร่วมและความแตกต่าง

สรุป

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

TypeScript น่าจะเป็นผู้ชนะที่ยิ่งใหญ่ของปี 2019 มันได้รับ React แต่ยังพิชิตโลกหลังสุดด้วย Node.js และความสามารถในการพิมพ์ไลบรารีเก่าด้วยค่อนข้างง่าย ไฟล์ประกาศ . มันฝังกระแสแม้ว่าบางส่วนจะดำเนินไป ตลอดทางด้วย ReasonML .

ตอนนี้ฉันรู้สึกว่า hooks + TypeScript นั้นน่าพอใจและมีประสิทธิผลมากกว่า Angular ฉันไม่คิดว่าหกเดือนที่แล้ว

ทำความเข้าใจพื้นฐาน

ฉันสามารถใช้ TypeScript กับ React ได้หรือไม่

ตอนนี้ TypeScript ดีมากสำหรับ React ถ้าคุณใช้ hooks ด้วย

TypeScript มีประโยชน์อย่างไร?

TypeScript ให้ความปลอดภัยของรหัส IDE ทำให้คุณมีข้อผิดพลาดเกี่ยวกับโค้ดมากที่สุดดังนั้นคุณจึงใช้เวลาน้อยลงในการดีบักแอปในคอนโซล

อะไรคือเรื่องใหญ่กับ React Hooks?

React Hooks ช่วยลดความซับซ้อนของการพัฒนาโค้ดและการบำรุงรักษา ตะขอยังมีชุดรูปแบบทั่วไปสำหรับปัญหาทั่วไป

อะไรคือความแตกต่างระหว่างคอนเทนเนอร์และส่วนประกอบ?

คอนเทนเนอร์มีตรรกะทางธุรกิจไม่ใช่ส่วนประกอบ แตกต่างจากคอนเทนเนอร์ตรงที่สามารถใช้ส่วนประกอบต่างๆในส่วนต่างๆของแอปได้แม้ในแอปต่างๆ

วิธีการรับสมัครผู้เข้าร่วมวิจัย UX

การออกแบบ Ux

วิธีการรับสมัครผู้เข้าร่วมวิจัย UX
Python Logging: บทช่วยสอนเชิงลึก

Python Logging: บทช่วยสอนเชิงลึก

ส่วนหลัง

โพสต์ยอดนิยม
แหล่งข้อมูลสำหรับธุรกิจขนาดเล็กสำหรับ COVID-19: เงินกู้เงินช่วยเหลือและสินเชื่อ
แหล่งข้อมูลสำหรับธุรกิจขนาดเล็กสำหรับ COVID-19: เงินกู้เงินช่วยเหลือและสินเชื่อ
วิธีออกแบบประสบการณ์ที่ยอดเยี่ยมสำหรับอินเทอร์เน็ตในทุกสิ่ง
วิธีออกแบบประสบการณ์ที่ยอดเยี่ยมสำหรับอินเทอร์เน็ตในทุกสิ่ง
กลยุทธ์การสื่อสารที่มีประสิทธิภาพสำหรับนักออกแบบ
กลยุทธ์การสื่อสารที่มีประสิทธิภาพสำหรับนักออกแบบ
เรียนรู้ Markdown: เครื่องมือการเขียนสำหรับนักพัฒนาซอฟต์แวร์
เรียนรู้ Markdown: เครื่องมือการเขียนสำหรับนักพัฒนาซอฟต์แวร์
แนวโน้มต่อไปนี้: การแสดงความเคารพกับการลอกเลียนแบบการออกแบบ
แนวโน้มต่อไปนี้: การแสดงความเคารพกับการลอกเลียนแบบการออกแบบ
 
คู่มือสไตล์ Sass: บทช่วยสอน Sass เกี่ยวกับวิธีการเขียนโค้ด CSS ที่ดีขึ้น
คู่มือสไตล์ Sass: บทช่วยสอน Sass เกี่ยวกับวิธีการเขียนโค้ด CSS ที่ดีขึ้น
ทำลายกระบวนการคิดเชิงออกแบบ
ทำลายกระบวนการคิดเชิงออกแบบ
การออกแบบเว็บไซต์ CMS: คู่มือการใช้งานเนื้อหาแบบไดนามิก
การออกแบบเว็บไซต์ CMS: คู่มือการใช้งานเนื้อหาแบบไดนามิก
ทำคณิตศาสตร์: การปรับขนาดแอปพลิเคชันไมโครเซอร์วิสด้วย Orchestrators
ทำคณิตศาสตร์: การปรับขนาดแอปพลิเคชันไมโครเซอร์วิสด้วย Orchestrators
การปฏิวัติหุ่นยนต์เชิงพาณิชย์ที่กำลังจะเกิดขึ้น
การปฏิวัติหุ่นยนต์เชิงพาณิชย์ที่กำลังจะเกิดขึ้น
โพสต์ยอดนิยม
  • การตรวจสอบอินพุต angularjs โดยไม่มี form
  • แบบสอบถามสื่อบูตสแตรปสำหรับอุปกรณ์ทั้งหมด
  • ความแตกต่างระหว่าง s corp และ corp
  • ดาวน์โหลดและรวม http สตรีมสด .ts ไฟล์
  • เมื่อออกแบบฐานข้อมูล คุณควร
  • กองทุนรวมการลงทุนอสังหาริมทรัพย์ของเอกชน
หมวดหมู่
  • การจัดการวิศวกรรม
  • บุคลากรและทีมงานของผลิตภัณฑ์
  • อื่น ๆ
  • นวัตกรรม
  • © 2022 | สงวนลิขสิทธิ์

    portaldacalheta.pt