ری اکت هوکس react.js hooks

در کل نوشتن کامپوننت ها در ری اکت به دو شکل کلاسی و تابعی مینویسیم ... در نسخه قبلی ری اکت بیشتر از نوع کلاسی استفاده می شده ؛ چون شما میتونستی به راحتی استیت های خودتون را تعریف کنی، و کامپننت مورد نظر پاس بدی . 

اما در نسخه های قبل از 16.8 ری کت این امکان وجود نداشت که در فرم فانکشنال ری اکت بتونی به راحتی state تعریف کنی و در پروژه هامون باید برای state نویسی از همون حالت کلاسی  استفاده میکردیم. حالا در نسخه های جدید ری اکت قابلیت جدیدی به نام  ری اکت هوکس اضافه شده که این خلا فانکشنال را پر کنه و فرقی بین نوشتن کلاسی و یا تابعی نداشته باشد.

نسخه های قبلی ری اکت را که نصب کنیم در فایل app.js خودش به صورت کلاسی نوشته شده بود ؛ اما اکنون بعد از نصب نسخه های جدید ری اکت ؛ فایل app.js به صورت تابعی نوشته شده .

مثال زیر یک شمارشگر را نشون میده  که با هربار کلیک بر روی ابجکت تعریف شده مقدار شمارشگر یک واحد اضافه می شود: 

import React, { useState } from 'react';
function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>You clicked {count} times</p>
            <button ={() => setCount(count + 1)}>Click me</button>
       </div>
   );
}

در مثال بالا useState یک Hook می باشد. این تابع را داخل یک تابع کامپوننت فراخوانی می کنیم تا یک state محلی را به آن اضافه کنیم. React این state را بین فراخوانی های متعدد کامپوننت حفظ می کند. useState یک آرایه با دو عنصر بر می گرداند که عنصر اول مقدار فعلی state و عنصر دوم یک تابع برای بروزرسانی مقدار state می باشد. این تابع شبیه this.setState می باشد با این تفاوت که state قبلی و جدید را با هم ادغام نمی کند.

useState تنها یک پارامتر به عنوان مقدار اولیه state می گیرد. در مثال بالا مقدار اولیه 0 می باشد و سبب می شود شمارشگر از 0 آغاز می شود، توجه داشته باشید که بر خلاف this.state که مقدار باید حتما object باشد در اینجا مقدار state می تواند object یا هر نوع داده دیگری باشد. مقدار اولیه state تنها در فراخوانی اول کامپوننت استفاده می شود.