React Js قسمت 5: روش‌های چرخه حیات و قلاب‌ها در React

Summarize this content to 400 words in Persian Lang React یک کتابخانه جاوا اسکریپت است که به ما این امکان را می دهد تا رابط کاربری را به صورت اعلامی بسازیم. یکی از مفاهیم کلیدی در React این است که چگونه چرخه حیات کامپوننت ها را مدیریت می کنیم. در این مقاله به دو جنبه اصلی خواهیم پرداخت: روش‌های چرخه حیات در اجزای کلاس و Hooks.

1. روش های چرخه حیات در اجزای کلاس

روش‌های چرخه حیات، روش‌های خاصی هستند که در مراحل مختلف چرخه عمر یک قطعه نامیده می‌شوند. در اینجا برخی از رایج ترین روش های چرخه عمر و اهداف آنها آورده شده است:

الف نصب

constructor(props): روش اول به نام. معمولاً برای مقداردهی اولیه و روش های اتصال استفاده می شود.

constructor(props) {
super(props);
this.state = { count: 0 };
}

componentDidMount(): پس از اینکه کامپوننت برای اولین بار در DOM نصب شد فراخوانی می شود. ایده آل برای واکشی داده یا مقداردهی اولیه اشتراک ها.

componentDidMount() {
this.fetchData();
}

ب به روز رسانی

componentDidUpdate(prevProps, prevState): پس از به روز رسانی کامپوننت فراخوانی می شود. برای پاسخ به تغییرات در props یا حالت مفید است. حتماً تغییرات را بررسی کنید تا از حلقه های بی نهایت جلوگیری کنید.

componentDidUpdate(prevProps) {
if (this.props.id !== prevProps.id) {
this.fetchData();
}
}

ج در حال نصب

componentWillUnmount(): درست قبل از حذف مؤلفه از DOM فراخوانی می شود. برای تمیز کردن اشتراک ها، تایمرها یا سایر عملیاتی که نیاز به پاکسازی دارند مفید است.

componentWillUnmount() {
this.cleanup();
}

د رسیدگی به خطا

componentDidCatch(error, info): برای گرفتن خطا در اجزای فرزند استفاده می شود. برای مدیریت متمرکز خطا مفید است.

componentDidCatch(error, info) {
logErrorToMyService(error, info);
}

2. مقدمه ای بر React Hooks

React Hooks قابلیتی است که به ما امکان می دهد از روش های حالت و چرخه زندگی بدون نوشتن اجزای کلاس استفاده کنیم. در اینجا برخی از پرکاربردترین قلاب ها آورده شده است:

الف useState()

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

import React, { useState } from ‘react’;

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

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};

ب useEffect()

useEffect به ما اجازه می دهد تا عوارض جانبی را در اجزای عملکردی اجرا کنیم. ترکیبی از عملکردهای componentDidMount، componentDidUpdate، و componentWillUnmount.

مثال 1: useEffect با آرایه خالی ([]) هنگامی که useEffect با یک آرایه خالی به عنوان یک وابستگی استفاده می شود، افکت تنها یک بار پس از مانت شدن مؤلفه اجرا می شود.

import React, { useState, useEffect } from ‘react’;

const FetchDataOnce = () => {
const [data, setData] = useState([]);

useEffect(() => {
const fetchData = async () => {
const response = await fetch(‘https://api.example.com/data’);
const result = await response.json();
setData(result);
};

fetchData();
}, []); // Effect runs only once when the component mounts

return (
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};

مثال 2: useEffect بدون آرایه وابستگی وقتی useEffect بدون آرایه وابستگی ارائه می شود، هر بار که مؤلفه دوباره ارائه می شود، افکت اجرا می شود.

import React, { useState, useEffect } from ‘react’;

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

useEffect(() => {
console.log(`Count updated: ${count}`);

const fetchData = async () => {
const response = await fetch(`https://api.example.com/data/${count}`);
const result = await response.json();
console.log(result);
};

fetchData();
}); // Effect runs every time the component renders

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};

مثال 3: useEffect با آرایه ای از وابستگی ها هنگامی که آرایه ای از وابستگی ها را ارائه می کنید، هر زمان که یکی از مقادیر آرایه تغییر کند، افکت اجرا می شود.

import React, { useState, useEffect } from ‘react’;

const DependOnCount = () => {
const [count, setCount] = useState(0);
const [data, setData] = useState([]);

useEffect(() => {
const fetchData = async () => {
const response = await fetch(`https://api.example.com/data/${count}`);
const result = await response.json();
setData(result);
};

fetchData();
}, [count]); // Effect runs every time `count` changes

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<ul>
{data.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};

ج useContext()

UseContext Hook برای دسترسی به متن در اجزای تابعی استفاده می شود. این به ویژه برای به اشتراک گذاری داده های جهانی، مانند تم ها یا وضعیت احراز هویت کاربر، بدون حفاری پایه مفید است.

مثال: قالب بندی با useContext
در این مثال، یک زمینه تم ساده ایجاد می کنیم که به ما امکان می دهد بین تم های روشن و تاریک جابجا شویم.

1. زمینه تم را ایجاد کنید

ابتدا یک زمینه برای موضوع ایجاد می کنیم.

import React, { createContext, useContext, useState } from ‘react’;

// Create a Theme Context
const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
const [theme, setTheme] = useState(‘light’);

const toggleTheme = () => {
setTheme((prevTheme) => (prevTheme === ‘light’ ? ‘dark’ : ‘light’));
};

return (
<ThemeContext.Provider value={{ theme, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
};

2. زمینه تم را مصرف کنید

سپس، می‌توانیم مؤلفه‌ای ایجاد کنیم که زمینه تم را برای اعمال سبک‌ها مصرف می‌کند و دکمه‌ای برای تغییر موضوع ارائه می‌دهد.

const ThemedComponent = () => {
const { theme, toggleTheme } = useContext(ThemeContext);

return (
<div className={`theme-${theme}`}>
<h1>{theme === ‘light’ ? ‘Light Theme’ : ‘Dark Theme’}</h1>
<button onClick={toggleTheme}>
Switch to {theme === ‘light’ ? ‘Dark’ : ‘Light’} Theme
</button>
</div>
);
};

3. برنامه را با Theme Provider بپیچید

در نهایت، ما برنامه خود (یا بخشی از آن) را با ThemeProvider می بندیم تا زمینه موضوع را در اختیار فرزندانش قرار دهیم.

const App = () => {
return (
<ThemeProvider>
<ThemedComponent />
{/* Other components can also access the ThemeContext here */}
</ThemeProvider>
);
};

export default App;

توضیح

ایجاد زمینه تم: ما یک ThemeContext با استفاده از createContext و یک مؤلفه ThemeProvider ایجاد می کنیم که وضعیت تم فعلی را مدیریت می کند و تابعی برای تغییر آن ارائه می دهد.
Context Consumption: در ThemedComponent، ما از useContext(ThemeContext) برای دسترسی به موضوع فعلی و تابع toggle استفاده می کنیم. این کامپوننت محتوای متفاوتی را بر اساس موضوع فعلی ارائه می‌کند و شامل دکمه‌ای برای تغییر دادن آن است.
ساختار برنامه: کل برنامه (یا بخشی از آن) در ThemeProvider پیچیده شده است و به هر مؤلفه فرزند اجازه می دهد به زمینه موضوع دسترسی داشته باشد.

د useMemo() و useCallback()

useMemo(): نتیجه محاسبات گران قیمت را ذخیره می کند تا از محاسبه مجدد در هر رندر جلوگیری شود.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useCallback(): توابع را ذخیره می‌کند تا از ایجاد مجدد آن‌ها در هر رندر جلوگیری شود.

const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);

3. مزایای استفاده از قلاب

قلاب ها انعطاف پذیری و توانایی به اشتراک گذاری منطق بین اجزا را بدون نیاز به استفاده از مولفه های مرتبه بالاتر (HOC) یا رندر پروپ ها فراهم می کنند. برخی از مزایای استفاده از هوک عبارتند از:

سادگی و وضوح: کد تمیزتر و خواندن آسان تر می شود.

انعطاف پذیری: منطق را می توان به توابع کوچکتری تقسیم کرد که می توان آنها را مجدداً در هر مکانی استفاده کرد.

کاهش پیچیدگی: از استفاده از کلاس ها و روش های پیچیده چرخه حیات اجتناب می کند.

روش‌های چرخه حیات و Hooks دو جنبه مهم توسعه React هستند. درک نحوه کار هر دو مفهوم به ما امکان می دهد تا اجزای کارآمدتر و قابل نگهداری را ایجاد کنیم. قلاب‌ها، به‌ویژه، فرصت‌های جدیدی را برای توسعه اجزای عملکردی باز می‌کنند و نحوه تعامل ما با وضعیت و عوارض جانبی را تغییر می‌دهند.

با تسلط بر روش‌های چرخه حیات و Hooks، می‌توانید برنامه‌های React قوی‌تر و پاسخ‌گو بسازید. کد نویسی مبارک!

React یک کتابخانه جاوا اسکریپت است که به ما این امکان را می دهد تا رابط کاربری را به صورت اعلامی بسازیم. یکی از مفاهیم کلیدی در React این است که چگونه چرخه حیات کامپوننت ها را مدیریت می کنیم. در این مقاله به دو جنبه اصلی خواهیم پرداخت: روش‌های چرخه حیات در اجزای کلاس و Hooks.

1. روش های چرخه حیات در اجزای کلاس

روش‌های چرخه حیات، روش‌های خاصی هستند که در مراحل مختلف چرخه عمر یک قطعه نامیده می‌شوند. در اینجا برخی از رایج ترین روش های چرخه عمر و اهداف آنها آورده شده است:

الف نصب

• constructor(props): روش اول به نام. معمولاً برای مقداردهی اولیه و روش های اتصال استفاده می شود.

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

• componentDidMount(): پس از اینکه کامپوننت برای اولین بار در DOM نصب شد فراخوانی می شود. ایده آل برای واکشی داده یا مقداردهی اولیه اشتراک ها.

componentDidMount() {
  this.fetchData();
}

ب به روز رسانی

componentDidUpdate(prevProps, prevState): پس از به روز رسانی کامپوننت فراخوانی می شود. برای پاسخ به تغییرات در props یا حالت مفید است. حتماً تغییرات را بررسی کنید تا از حلقه های بی نهایت جلوگیری کنید.

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

ج در حال نصب

componentWillUnmount(): درست قبل از حذف مؤلفه از DOM فراخوانی می شود. برای تمیز کردن اشتراک ها، تایمرها یا سایر عملیاتی که نیاز به پاکسازی دارند مفید است.

componentWillUnmount() {
  this.cleanup();
}

د رسیدگی به خطا

componentDidCatch(error, info): برای گرفتن خطا در اجزای فرزند استفاده می شود. برای مدیریت متمرکز خطا مفید است.

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

2. مقدمه ای بر React Hooks

React Hooks قابلیتی است که به ما امکان می دهد از روش های حالت و چرخه زندگی بدون نوشتن اجزای کلاس استفاده کنیم. در اینجا برخی از پرکاربردترین قلاب ها آورده شده است:

الف useState()

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

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

ب useEffect()

useEffect به ما اجازه می دهد تا عوارض جانبی را در اجزای عملکردی اجرا کنیم. ترکیبی از عملکردهای componentDidMount، componentDidUpdate، و componentWillUnmount.

• مثال 1: useEffect با آرایه خالی ([]) هنگامی که useEffect با یک آرایه خالی به عنوان یک وابستگی استفاده می شود، افکت تنها یک بار پس از مانت شدن مؤلفه اجرا می شود.

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

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

• مثال 2: useEffect بدون آرایه وابستگی وقتی useEffect بدون آرایه وابستگی ارائه می شود، هر بار که مؤلفه دوباره ارائه می شود، افکت اجرا می شود.

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

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

• مثال 3: useEffect با آرایه ای از وابستگی ها هنگامی که آرایه ای از وابستگی ها را ارائه می کنید، هر زمان که یکی از مقادیر آرایه تغییر کند، افکت اجرا می شود.

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

const DependOnCount = () => {
  const [count, setCount] = useState(0);
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [count]); // Effect runs every time `count` changes

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

ج useContext()

UseContext Hook برای دسترسی به متن در اجزای تابعی استفاده می شود. این به ویژه برای به اشتراک گذاری داده های جهانی، مانند تم ها یا وضعیت احراز هویت کاربر، بدون حفاری پایه مفید است.

مثال: قالب بندی با useContext
در این مثال، یک زمینه تم ساده ایجاد می کنیم که به ما امکان می دهد بین تم های روشن و تاریک جابجا شویم.

1. زمینه تم را ایجاد کنید

ابتدا یک زمینه برای موضوع ایجاد می کنیم.

import React, { createContext, useContext, useState } from 'react';

// Create a Theme Context
const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};

2. زمینه تم را مصرف کنید

سپس، می‌توانیم مؤلفه‌ای ایجاد کنیم که زمینه تم را برای اعمال سبک‌ها مصرف می‌کند و دکمه‌ای برای تغییر موضوع ارائه می‌دهد.

const ThemedComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div className={`theme-${theme}`}>
      <h1>{theme === 'light' ? 'Light Theme' : 'Dark Theme'}</h1>
      <button onClick={toggleTheme}>
        Switch to {theme === 'light' ? 'Dark' : 'Light'} Theme
      </button>
    </div>
  );
};

3. برنامه را با Theme Provider بپیچید

در نهایت، ما برنامه خود (یا بخشی از آن) را با ThemeProvider می بندیم تا زمینه موضوع را در اختیار فرزندانش قرار دهیم.

const App = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
      {/* Other components can also access the ThemeContext here */}
    </ThemeProvider>
  );
};

export default App;

توضیح

• ایجاد زمینه تم: ما یک ThemeContext با استفاده از createContext و یک مؤلفه ThemeProvider ایجاد می کنیم که وضعیت تم فعلی را مدیریت می کند و تابعی برای تغییر آن ارائه می دهد.

• Context Consumption: در ThemedComponent، ما از useContext(ThemeContext) برای دسترسی به موضوع فعلی و تابع toggle استفاده می کنیم. این کامپوننت محتوای متفاوتی را بر اساس موضوع فعلی ارائه می‌کند و شامل دکمه‌ای برای تغییر دادن آن است.

• ساختار برنامه: کل برنامه (یا بخشی از آن) در ThemeProvider پیچیده شده است و به هر مؤلفه فرزند اجازه می دهد به زمینه موضوع دسترسی داشته باشد.

د useMemo() و useCallback()

• useMemo(): نتیجه محاسبات گران قیمت را ذخیره می کند تا از محاسبه مجدد در هر رندر جلوگیری شود.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useCallback(): توابع را ذخیره می‌کند تا از ایجاد مجدد آن‌ها در هر رندر جلوگیری شود.

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

3. مزایای استفاده از قلاب

قلاب ها انعطاف پذیری و توانایی به اشتراک گذاری منطق بین اجزا را بدون نیاز به استفاده از مولفه های مرتبه بالاتر (HOC) یا رندر پروپ ها فراهم می کنند. برخی از مزایای استفاده از هوک عبارتند از:

• سادگی و وضوح: کد تمیزتر و خواندن آسان تر می شود.
• انعطاف پذیری: منطق را می توان به توابع کوچکتری تقسیم کرد که می توان آنها را مجدداً در هر مکانی استفاده کرد.
• کاهش پیچیدگی: از استفاده از کلاس ها و روش های پیچیده چرخه حیات اجتناب می کند.

روش‌های چرخه حیات و Hooks دو جنبه مهم توسعه React هستند. درک نحوه کار هر دو مفهوم به ما امکان می دهد تا اجزای کارآمدتر و قابل نگهداری را ایجاد کنیم. قلاب‌ها، به‌ویژه، فرصت‌های جدیدی را برای توسعه اجزای عملکردی باز می‌کنند و نحوه تعامل ما با وضعیت و عوارض جانبی را تغییر می‌دهند.

با تسلط بر روش‌های چرخه حیات و Hooks، می‌توانید برنامه‌های React قوی‌تر و پاسخ‌گو بسازید. کد نویسی مبارک!