كيفية استخدام خطاف useState React

اكتشف فائدة خطاف useState React وكيفية التعامل معها!

تحقق من بلديرد فعل الخطافات مقدمةأولاً ، إذا كنت جديدًا عليهم.

خطاف React الذي أستخدمه غالبًا هوuseState.

import React, { useState } from '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!