شروع کار با ویژگی جدید React hooks بصورت مقدماتی

دسته بندی: آموزش
زمان مطالعه: 8 دقیقه
۲۹ آذر ۱۳۹۷

شروع کار با ویژگی جدید React hooks بصورت مقدماتیدر این مطلب میخوام ویژگی جدید React hooks که قراره به زودی منتشر بشه رو بهتون معرفی کنم و قابلیتهای اون رو بهتون توضیح بدم.

React hooks یک ویژگی فوق‌العاده و جدید هست که تیم React داره روی اون کار میکنه و به زودی بصورت رسمی منتشر خواهد شد. قرار بود که با انتشار نسخه 16.7.0 از React، ویژگی React hooks نیز بصورت رسمی و stable در دسترس کاربران قرار بگیره ولی در این نسخه این امکان فراهم نشد و هنوز نمیتونیم در محیط Production از اون استفاده کنیم ولی میتونیم در Development اون رو تست کنیم و ویژگی‌هایی که در اختیارمون قرار میده رو در عمل ببینیم.

با منتشر شدن React 16.6.0 ویژگی‌هایی مثل React.memo و React.lazy و suspense در اختیار کاربران قرار گرفت. تیم React با هر ورژن سعی میکنه که ویژگی‌های جدیدی رو نیز منتشر کنه و این بار هم بر روی React hooks کار میکنه و به زودی در دسترس قرار خواهد گرفت.

شما میتونین نسخه 16.7.0-alpha.2 رو نصب کرده و همین الان در محیط Development اون رو تست کنید تا ببینید که چه کارهایی رو میتونین با استفاده از اون انجام بدین.

Hook‌ها چه چیزی هستند؟

React hooks یک ویژگی هست که با استفاده از اون میتونین ویژگی‌هایی که Class component دارند رو در functional component نیز استفاده کنید. ویژگی‌هایی نظیر:

  • State
  • Lifecycle

Hooks به شما این امکان رو میدن که بدون استفاده از class، از ویژگی‌های React بهره ببرید.

استفاده از Class‌ها حذف نشده و راه بدی نیستند و Hook‌ها راه‌های دیگه‌ای رو برای کدنویسی در اختیارمون قرار میدن و بابت این موضوع نمیخواد نگران باشید.

در ابتدا برای اینکه بتونین این ویژگی‌ها رو مورد استفاده قرار بدین، باید بسته‌های زیر رو با npm یا yarn نصب کنید:

yarn add [email protected] [email protected].0-alpha.2

Hook مربوط به State در React

فرض کنید که یک Component بصورت زیر داریم که در اون از class و setState استفاده شده است. بصورت زیر:

import React, { Component } from 'react';

class JustAnotherCounter extends Component {
  state = {
    count: 1,
  };

  setCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>

        <button onClick={this.setCount}>Count Up To The Moon</button>
      </div>
    );
  }
}

export default JustAnotherCounter;

همونطور که دیدید یک counter درست کردیم و هر زمان که بر روی دکمه مورد نظر کلیک کنیم، عدد counter یکی بالا میره. حالا اگر بخوایم همین کار رو با استفاده از Hooks انجام بدیم بصورت زیر عمل میکنیم:

import React, { useState } from 'react';

function JustAnotherCounter() {
  const [count, setCount] = useState(1);

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Count Up To The Moon</button>
    </div>
  );
}

export default JustAnotherCounter;

میبینید که کدها چقد ساده‌تر و کمتر شدند و دیگه از class هم استفاده نکردیم و هر 2 کد بالا دقیقا یک کار رو انجام میدن. افرادی که تازه میخوان React رو یاد بگیرن، کار کردن با حالت دوم براشون خیلی ساده‌تر هست.

سینتکس useState

در خط 4 کد بالا از useState استفاده کردیم و به احتمال زیاد این نحوه استفاده برای شما ناآشنا هست و کمی شما رو گیج کرده. در خط 4 از Destructuring برای آرایه‌ها استفاده شده است.

فرض کنید که یک آرایه بصورت زیر داشته باشیم:

const users = ['chris', 'nick'];

حالا میتونیم اعضای این آرایه رو بصورت زیر Destructure کنیم:

const [SuperAdmin, SuperUser] = users;

با اینکار اعضای آرایه به ترتیب در متغیر SuperAdmin و SuperUser قرار داده میشن. پس مقدار SuperAdmin برابر با chris و مقدار SuperUser برابر با nick میشه.

useState چه چیزهایی رو در اختیارمون قرار میده؟

useState دو متغیر رو در اختیار ما قرار میده و میتونیم هر نامی که بخوایم رو بر روی اونا قرار بدیم. توجه داشته باشید که:

  • متغیر اول یک مقدار هست. شبیه به this.state
  • متغیر دوم یک تابع برای به روز رسانی مقدار اول است. شبیه به this.setState

آخرین چیزی که در مورد useState باید بدونین اینه که میتونیم یک آرگومان رو به اون پاس بدیم. این آرگومانی که پاس میدیم به عنوان مقدار اولیه برای state قرار داده میشه. در کدهای بالا همونطور که دیدید 1 رو به عنوان آرگومان پاس دادیم و به این معنا هست که میخوایم counter از 1 شروع بشه.

کلاسها چه مشکلی دارند؟

در مستندات React در مورد این موضوع توضیح داده شده است. زمانی که Component رو بصورت class به وجود میاریم، میتونیم از روشهای مختلفی استفاده کنیم و هر کس یک component رو به روشهای مختلفی مینویسه و مقداری برای افراد دیگه گیج کننده هست و زمان میبره تا متوجه بشیم که دیگر افراد تیم چطوری کدهاشون رو نوشتند. با استفاده از Hook‌ها نوشتن component‌ها شبیه به هم میشه و خیلی ساده‌تر میتونین در کارهای تیمی از اون استفاده کنید و خوانایی بالاتری داره.

همونطور که قبلا نیز بیان شد، هیچ برنامه‌ای برای حذف class‌ها در React وجود نداره و Hook‌ها فقط این امکان رو بهتون میدن که به روشی ساده‌تر component‌های خودتون رو به وجود بیارید.

استفاده از چند State hook بصورت همزمان

ما میتونیم بصورت همزمان در یک Component از چند useState استفاده کنیم. بصورت زیر:

import React, { useState } from 'react';

const AllTheThings = () => {
  const [count, setCount] = useState(0);
  const [products, setProducts] = useState([{ name: 'Surfboard', price: 100 }]);
  const [coupon, setCoupon] = useState(null);

  return <div>use all those things here</div>;
};

export default AllTheThings;

Effect hook در React

همونطور که در بالا مشاهده کردید با استفاده از State hook میتونیم از state‌ها در functional component استفاده کنیم. با این ویژگی یک قدم به استفاده بیشتر از functional component به class component نزدیکتر میشیم. قدم بعدی اینه که بتونیم از lifecycle methods در functional component استفاده کنیم.

Effect کارهای مربوط به componentDidMount و componentDidUpdate و componentWillUnmount رو انجام میده و شبیه به اونا هست. پس Effect‌ها نیز به ما این قدرت رو میدن که بتونیم در functional component از lifecycle‌های React استفاده کنیم. Effect بعد از هر رندر شدن component اجرا میشه. خب حالا میخوایم lifecycle رو در class component و functional component با هم مقایسه کنیم.

فرض کنید که یک component بصورت زیر با class داشته باشیم:

import React, { Component } from 'react';

class DoSomethingCrazy extends Component {
  componentDidMount() {
    console.log('i have arrived!');
    document.title = 'present';
  }

  render() {
    return <div>stuff goes here</div>;
  }
}

export default DoSomethingCrazy;

همونطور که میبینید در componentDidMount یک متن رو در console چاپ کرده و title صفحه رو نیز برابر با present قرار دادیم. حالا اگر بخوایم همین کار رو با effect hook انجام بدیم، بصورت زیر عمل میکنیم:

import React, { useEffect } from 'react';

const DoSomethingCrazy = () => {
  useEffect(() => {
    console.log('i have arrived!');
    document.title = 'present';
  });

  return <div>stuff goes here</div>;
}

export default DoSomethingCrazy;

همونطور که میبینید useEffect بسیار شبیه به componentDidMount و componentDidUpdate عمل میکنه.

اجرا شدن Effect فقط در زمانی که چیزی تغییر پیدا کند

از اونجایی که useEffect بعد از هر رندر شدن component اجرا میشه، چطور میتونیم کاری کنیم که فقط در بار اول و فقط برای یکبار در زمان mount شدن، اجرا بشه. Effect hook یک آرایه نیز به عنوان آرگومان دوم قبول میکنه. این Hook به اعضای این آرایه نگاه میکنه و فقط زمانی اجرا میشه که اونا تغییر پیدا بکنند.

شبیه‌سازی componentDidMount: فقط اجرا در زمان mount شدن

useEffect(() => {
  // only runs once
}, []);

کدهای درون useEffect بالا فقط یکبار و در زمان mount شدن component اجرا میشن. به خاطر اینکه یک آرایه خالی رو به عنوان آرگومان دوم پاس دادیم.

شبیه‌سازی componentDidUpdate: اجرا شدن در زمان تغییر

useEffect(
  () => {
    // run here if count changes
  },
  [count]
);

کدهای درون useEffect بالا هر زمان که مقدار متغیر count تغییر پیدا کنه، اجرا میشن.

شبیه‌سازی componentWillUnmount

برای اجرا کردن چیزی قبل از unmount شدن component، میتونیم یک function رو در useEffect برگشت بدیم یا return کنیم. بصورت زیر:

useEffect(() => {
  UsersAPI.subscribeToUserLikes();

  // unsubscribe
  return () => {
    UsersAPI.unsubscribeFromUserLikes();
  };
});

همونطور که میبینید در خود useEffect از subscribe استفاده شده و در تابعی که در مقابل return قرار گرفته از unsubscribe استفاده شده است. کدهای درون unsubscribe فقط زمانی اجرا میشن که component فعلی unmount بشه.

شما میتونین از state hook و effect hook بصورت همزمان استفاده کنید و نیازهای خودتون رو با functional component رفع کنید. به همین راحتی. برای مطالعه بیشتر میتونین مستندات React رو مطالعه کنید.

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

نظرات کاربران

صفورا

توضیح کامل و جامع بود واقعا. دست شما درد نکنه

یوسف

ممنون خیلی کمک خوبی کردین

علی

سلام
خدا خیرتون بده واقعا مفید بود
خدا قوت
نمیدونم چطوری تشکر کنم.
با زبانی رسا و ساده و خیلی خیلی مفید خیلی ممنونم

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :