آموزش کامپوننتهای تابعی Functional Components

کامپوننت‌های تابعی برخی از کامپوننتهای رایجتری هستند که هنگام کار در React با آنها مواجه می‌شوید. اینها همان تابع جاوا اسکریپت هستند. ما می توانیم با نوشتن یک تابع جاوا اسکریپت یک کامپوننت تابعی برای React ایجاد کنیم. این تابع ممکن است داده ها را به عنوان پارامتر دریافت کند یا نکند. در اجزای تابعی، مقدار بازگشتی کد JSX است که باید به درخت DOM ارائه شود. اجزای عملکردی همچنین می توانند state یا حالت داشته باشند که با استفاده از هوک hook های React مدیریت می شوند.

روش های مختلف فراخوانی کامپوننت تابعی:

ما می توانیم در جاوا اسکریپت تابع را به روش های زیر فراخوانی Call کنیم:

1. فراخوانی تابع با استفاده از نام تابع به دنبال پرانتز.

// Example of Calling the function with function name followed by Parentheses
import React from 'react';
import ReactDOM from 'react-dom/client';
function Parentheses() {
    return (<h1>
                We can call function using name of the 
                function followed by Parentheses 
            </h1>);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(Parentheses());

2. فراخوانی تابع با استفاده از روش کامپوننت تابعی.

// Example of Calling the function using component call
import React from 'react';
import ReactDOM from 'react-dom/client';
function Comp() {
    return (<h1> As usual we can call the function using component call</h1>);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Comp />);

اکنون از متد کامپوننت تابعی برای ایجاد یک برنامه استفاده می کنیم و می بینیم که چگونه کامپوننت های تابعی کامپوننت را در مرورگر رندر می کنند.

برنامه ای برای نشان دادن ایجاد کامپوننت تابعی

دایرکتوری پروژه React خود را باز کنید و به پوشه src بروید سپس فایل index.js را ویرایش کنید.

//index.js File
import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './App';
 
ReactDOM.render(
    <React.StrictMode>
        <Demo />
    </React.StrictMode>,
    document.getElementById('root')
);

فایل App.js را از پوشه src باز کنید و فایل را ویرایش کنید.

//App.js File
import React from 'react';
import ReactDOM from 'react-dom';

const Demo=()=>{return <h1>Welcome to GeeksforGeeks</h1>};
export default Demo;

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

کامپوننت تابعی در مقایسه با کامپوننتهای مبتنی بر کلاس، فاقد مقدار قابل توجهی از ویژگی‌ها هستند و به متغیرهای حالت اختصاصی مانند کامپوننتهای مبتنی بر کلاس دسترسی ندارند. این شکاف با کمک یک مفهوم خاص ReactJS به نام "hook" برطرف می شود. ReactJS به یک hook مخصوص به نام useState دسترسی دارد. از useState برای مقداردهی اولیه یک متغیر حالت state به متغیرهای چندگانه state استفاده می شود. اولین مقدار بازگشتی، مقدار اولیه متغیر حالت است، در حالی که دومین مقدار بازگشتی، ارجاع به تابعی است که آن را به روز می کند.

برنامه ای برای نشان دادن استفاده از هوک hook useState

مسیرفایل- src/index.js: دایرکتوری پروژه React خود را باز کنید و فایل Index.js را از پوشه src ویرایش کنید.

//index.js File
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';

ReactDOM.render(
	<React.StrictMode>
		<Example />
	</React.StrictMode>,
	document.getElementById('root')
);

مسیرفایل-src/App.js: دایرکتوری پروژه React خود را باز کنید و فایل App.js را از پوشه src ویرایش کنید:

//App.js File
import React, { useState } from 'react';

const Example = () => {
	const [change, setChange] = useState(true);
	return (
		<div>
			<button ={() => setChange(!change)}>
				Click Here!
			</button>
			{change ? <h1>Welcome to GeeksforGeeks</h1> :
				<h1>A Computer Science Portal for Geeks</h1>}
		</div>
	);
}
export default Example;

خروجی: خروجی را مطابق شکل زیر دریافت خواهید کرد.

مولفه‌های تابعی مانند مؤلفه های مبتنی بر کلاس به توابع چرخه حیات lifecycle functions دسترسی ندارند زیرا توابع چرخه حیات lifecycle functions باید در محدوده یک کلاس تعریف شوند. یک hook هوک React ویژه به نام useEffect باید استفاده شود. شایان ذکر است که useEffect یک کپی دقیق از توابع چرخه حیات نیست - به روشی کمی متفاوت کار می کند و رفتار می کند.

برنامه ای برای نشان دادن استفاده از هوک useEffect

مسیرفایل- src/index.js: دایرکتوری پروژه React خود را باز کرده و فایل index.js را از پوشه src ویرایش کنید.

//index.js File
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';

ReactDOM.render(
	<React.StrictMode>
		<Example />
	</React.StrictMode>,
	document.getElementById('root')
);

مسیرفایل-src/App.js: دایرکتوری پروژه React خود را باز کرده و فایل App.js را از پوشه src ویرایش کنید.

//App.js File
import React, { useEffect } from 'react';

const Example = () => {
	useEffect(() => {
		console.log(&quotMounting...&quot);
	});
	return (
		<h1>
			Geeks....!
		</h1>
	);
}
export default Example;

خروجی: خروجی را مانند این در مرورگر خود دریافت خواهید کرد.

داده ها از کامپوننت والد به کامپوننت های فرزند به صورت prop منتقل می شوند. ReactJS به‌عنوان یک قاعده به یک کامپوننت اجازه نمی‌دهد که ویژگی‌های خود را تغییر دهد. تنها راه اصلاح prop پراپ ها این است که پراپ های در حال ارسال به کامپوننت فرزند را تغییر دهید. این به طور کلی با انتقال یک مرجع از یک تابع در کامپوننت والد به کامپوننت فرزند انجام می شود.

برنامه ای برای نشان دادن استفاده از پراپ prop

مسیرفایل- src/index.js: دایرکتوری پروژه React خود را باز کنید و فایل Index.js را از پوشه src ویرایش کنید.

//index.js File
import React from 'react';
import ReactDOM from 'react-dom';
import Example from './App';

ReactDOM.render(
	<React.StrictMode>
		<Example />
	</React.StrictMode>,
	document.getElementById('root')
);

مسیرفایل-src/App.js: دایرکتوری پروژه React خود را باز کرده و فایل App.js را از پوشه src ویرایش کنید.

import React, { useState } from 'react';
import props from 'prop-types';

const Example = () => {
	return (
		<h1>{props.data}</h1>
	);
}
function propsExample() {
	const [change, setChange] = useState(true);
	return (
		<div>
			<button ={() => setChange(!change)}>
				Click Here!
			</button>
			{change ?
				<Example data=&quotWelcome to GeeksforGeeks&quot /> :
				<Example data=&quotA Computer Science Portal for Geeks&quot />}
		</div>
	);
}
export default Example;

خروجی: خروجی را به این صورت در مرورگر خود خواهید دید.