تعلم React Hooks في 5 دقائق - دروس للمبتدئين

أحيانًا تكون 5 دقائق هي كل ما لديك. لذا في هذه المقالة ، سنتطرق فقط إلى اثنين من أكثر الخطافات استخدامًا في React: useStateو useEffect.

إذا لم تكن مألوفًا مع الخطافات ، فإليك TL ؛ DR: بسبب الخطافات ، لم تعد هناك حاجة تقريبًا للمكونات المستندة إلى الفصل. تتيح لك الخطافات "ربط" دورة الحياة الأساسية وتغييرات الحالة لمكون داخل مكون وظيفي. أكثر من ذلك ، فهي تعمل أيضًا على تحسين قابلية القراءة وتنظيم المكونات الخاصة بك.

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

useState

لنبدأ بمكون وظيفي.

import React from 'react'; function App() { return ( 

0

Change! ); }

عداد عند 0

كما ترى ، لا يوجد شيء خيالي في الوقت الحالي. نحن فقط نعرض بعض النص وزر (عديم الفائدة).

الآن دعنا نستورد أول خطاف لدينا ، useStateلمعرفة كيفية التعامل مع الحالة في مكوننا الوظيفي.

نظرًا لأن هذا الخطاف دالة ، فلنسترجع console.logمنه.

import React, { useState } from 'react'; function App() { const value = useState(); console.log(value); return ( 

0

Change! ); }

في وحدة التحكم ، نحصل على مجموعة

> [null, ƒ()] 

وعندما نمرر حجة إلى useState

const value = useState(true); 

في وحدة التحكم ، نحصل على مصفوفة بقيمتنا كأول عضو.

> [true, ƒ()] 

الآن ، في مكوننا ، يمكننا الوصول إلى دولتنا value[0]وتقديمها في

بدلاً من قيمة مضمنة.

import React, { useState } from 'react'; function App() { const value = useState(0); console.log(value); // [0, ƒ()] return ( 

{value[0]}

Change! ); }

عداد عند 0

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

const person = { name: 'Joe', age: 42 }; // creates 2 const values from person object const { name, age } = person; console.log(name); // 'Joe' console.log(age); // 42 

عملية تدمير المصفوفة هي نفسها تقريبًا ، ولكنها تستخدم أقواسًا مربعة []بدلاً من الأقواس المتعرجة {}.

نصيحة سريعة: في إتلاف الكائنات ، يجب أن تتطابق أسماء المتغيرات التي تم إنشاؤها مع أسماء الخصائص الموجودة في الكائن. لتدمير المصفوفة ، هذا ليس هو الحال. الأمر كله يتعلق بالترتيب. الفائدة هنا هي أنه يمكننا تسمية العناصر كما نريد.

باستخدام إتلاف الصفيف ، يمكننا الحصول على القيمة الأولية للحالة من useState()الخطاف.

import React, { useState } from 'react'; function App() { // remember, there's a second item from the array that's missing here, but we'll come right back to use it soon const [count] = useState(0); return ( 

{count}

Change! ); }

حسنًا ، لدينا قيمة الحالة الأولية. كيف نغير القيمة في الحالة بخطافات؟

تذكر أن useState()الخطاف يعيد مصفوفة تتكون من عضوين. العضو الثاني هو وظيفة تحديث الدولة!

const [count, setCount] = useState(0); 

You can, of course, call it what you wish, but by convention, it's normally called with prefix "set-", and then whatever state variable we wish to update was called, so setCount it is.

It's simple to use this function. Just call it and pass the new value you want that state to have! Or, just like this.setState in a class component, you can pass a function that receives the old state and returns the new state. Rule of thumb: do this anytime you need to rely on the past state to determine the new state.

To call it, we'll pass it to the onClick event listener. And just like with a regular setState in a class-based component, we can pass our state update to setCount.

function App() { const [count, setCount] = useState(0); return ( 

{count}

setCount(prevCount => prevCount + 1)}> Change! ); }

We can clean this up a bit, by extracting our state update to a separate function.

function App() { const [count, setCount] = useState(0); function change() { setCount(prevCount => prevCount + 1); } return ( 

{count}

Change! ); }

Great! And now when we can see the counter going up when we click the button.

عداد في 1

Of course, useState can get a lot more complicated than this, but we've only got 5 minutes here, so let's move on to the next hook for now.

useEffect

Hooks have simplified quite a few things, compared to the way things were in class-based components. Previously we needed to know a bit about lifecycle methods and which one is best suited for which situation. useEffect hook simplified this situation. If you wish to perform side effects, network request, manual DOM manipulation, event listeners or timeouts and intervals.

useEffect hook can be imported just like useState.

import React, { useState, useEffect } from 'react'; 

To make useEffect do something, we pass it an anonymous function as an argument. Whenever React re-renders this component, it will run the function we pass to useEffect.

useEffect(() => { /* any update can happen here */ }); 

This is what the whole code might look like.

import React, { useState, useEffect } from 'react'; function App() { const [count, setCount] = useState(0); function change() { setCount(prevCount => prevCount + 1); } useEffect(() => { /* any update can happen here */ }); return ( 

{count}

Change! ); } export default App;

As an example, we will use a nice npm package that generates a random color. Feel free to write your own if you wish of course, but for this tutorial, we will just install it, npm i randomcolor, and import.

import randomcolor from 'randomcolor'; 

Let's now use our knowledge about useState hook to store some random color in the state.

const [color, setColor] = useState(''); // initial value can be an empty string 

We then can then assign the color of the counter we already have.

{count}

Now, just for the sake of it, let's change the color of the counter on every click of the Change! button. useEffect will run every time the component re-renders, and the component will re-render every time the state is changed.

So if we write the following code, it would get us stuck in an infinite loop! This is a very common gotcha with useEffect

useEffect(() => { setColor(randomcolor()); }); 

setColor updates state, which re-renders the component, which calls useEffect, which runs setColor to update the state, which re-renders the component... Yikes!

We probably only want to run this useEffect when the count variable changes.

To tell useEffect which variable(s) to keep track of, we give an array of such variables as a second argument.

useEffect(() => { setColor(randomcolor()); }, [count]); 

عداد في 2

هذا يقول أساسا "فقط تشغيل هذا التأثير إذا و countالتغيرات الدولة. وبهذه الطريقة يمكننا تغيير اللون وليس قضية تأثير لدينا لتشغيل ما لا نهاية.

استنتاج

هناك الكثير لتتعلمه عن الخطافات ، لكن أتمنى أن تكون قد استمتعت بهذه النظرة الخاطفة السريعة لمدة 5 دقائق على الخطافات.

لمعرفة المزيد حول React Hooks والميزات الرائعة الأخرى لـ React ، يمكنك الانضمام إلى قائمة الانتظار لدورة React المتقدمة القادمة. أو إذا كنت تبحث عن لغة أكثر صداقة مع المبتدئين ، يمكنك مراجعة الدورة التدريبية التمهيدية الخاصة بي على React.

سعيد الترميز؟