مقدمة في React Hooks

تعرف على كيفية مساعدة الخطافات في بناء تطبيق React

الخطافات هي ميزة سيتم تقديمها في React 16.7 ، وستغير طريقة كتابة تطبيقات React في المستقبل.

قبل ظهور الخطافات ، كانت بعض الأشياء الأساسية في المكونات ممكنة فقط باستخدام مكونات الصنف: لها حالتها الخاصة ، واستخدام أحداث دورة الحياة. كانت مكونات الوظيفة ، أخف وزنا وأكثر مرونة ، محدودة في الوظائف.

الخطافات تسمح لمكونات الوظيفة بالحالة والاستجابة لأحداث دورة الحياةأيضًا ، نوعًا ما تجعل مكونات الفصل عفا عليها الزمن. كما أنها تسمح لمكونات الوظيفة بالحصول على طريقة جيدة للتعامل مع الأحداث.

حالة الوصول

باستخدامuseState()API ، يمكنك إنشاء متغير حالة جديد ، ولديك طريقة لتغييره.useState()يقبل القيمة الأولية لعنصر الحالة ويعيد مصفوفة تحتوي على متغير الحالة ، والدالة التي تستدعيها لتغيير الحالة. نظرًا لأنه يقوم بإرجاع مصفوفة نستخدمهاتدمير مجموعةللوصول إلى كل عنصر فردي ، مثل هذا:const [count, setCount] = useState(0)

إليك مثال عملي:

import { useState } from 'react'

const Counter = () => { const [count, setCount] = useState(0)

return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

يمكنك إضافة أكبر عدد ممكنuseState()المكالمات التي تريدها ، لإنشاء العديد من متغيرات الحالة كما تريد. فقط تأكد من تسميته في المستوى العلوي للمكون (وليس في ملفifأو في أي كتلة أخرى).

مثال على Codepen:

انظر القلمReact Hooks مثال رقم 1 للعدادبقلم فلافيو كوبس (تضمين التغريدة) تشغيلكود.

Tech Wiki Online!