Components and Props

کامپوننت ها به ما اجازه میدهند که UI را به صورت قطعه های مستقل و reusable و ایزوله تقسیم کنیم. کامپوننت ها مثل توابع در JS هستند. ورودی های اختیاری میگیرند (props) و المنت های React برمیگردانند که آنچه باید در صفحه نشان داده شود را توصیف میکند.کامپوننت های class و functionساده ترین روش تعریف کامپوننت، نوشتن یک تابع JS است:function Welcome(props){return <h1>Hello, {props.name}</h1>;}به چنین کامپوننتی function component گفته میشود. میتوان از ES6 class هم برای تعریف کامپوننت استفاده کرد:class Welcome extends React.Component{render() { return <h1>Hello {this.props.name}</h1>; }}هر دو کامپوننت بالا از نظر React یکسان هستند. کلاس ها ویژگی های بیشتری دارند که در آینده مطرح میکنیم. در حال حاضر به خاطر کوتاهتر بودن تابع، از تابع استفاده میکنیم.م render کردن یک کامپوننتقبلا فقط از DOM tag برای المنت های React استفاده کردیم (مثل div). اما المنت میتواند کامپوننتی ارائه دهد که کاربر ایجاد کرده (مثل Welcome).const element = <Welcome name='pazireh' />; وقتی React میبیند که المنت یک کامپوننت user-definded ارائه کرده، صفت های JSX را به عنوان یک شیء به این کامپوننت pass میکند. به این شیء props میگوییم.مثال:function Welcome(props) { return <h1>Hello, {props.name}</h1> }const element = <Welcome name='pazireh' />;ReactDOM.render(element, getElementById('root'));آنچه در این کد اتفاق می افتد: ما ReactDOM.render() را با المنت <Welcome name='pazireh' /> فراخوانی میکنیم.م React کامپوننت Welcome را با {name: 'pazireh'} به عنوان ویژگی فراخوانی میکند.کامپوننت Welcome یک المنت <h1>Hello, pazireh</h1> را برمیگرداند.م React DOM آپدیت میکند DOM را طوری که با <h1>Hello, pazireh</h1> مطابقت کند. نکته: همیشه اسم کامپوننت ها را با حروف بزرگ شروع کنید. اگر با حروف کوچک شروع شوند، React با آنها مثل تگ های DOM رفتار میکند. ایجاد کامپوننت هاکامپوننت ها میتونند به کامپوننت های دیگر ارجاع داده شوند. بنابراین میتوانیم در هر سطحی از جزئیات از آنها استفاده کنیم: button یا form یا dialog یا screen. برای مثال میتوانیم یک کامپوننت App ایجاد کنیم که چندین بار Welcome را render میکند:function Welcome(props) { return <h1>Hello, {props.name}</h1> }function App(){return(<div><Welcome name='pazireh' /><Welcome name='ali' /><Welcome name='sara' /></div>);}ReactDOM.render(<App />, document.getElementById('root'));اپلیکیشن های جدید React یک کامپوننت App دارند که top است. ولی اگر شما React را با با یک app موجود یکپارچه کنید، ممکن است به صورت bottom-up شروع کنید با یک کامپوننت کوچک مثل Button و به تدریج به سمت top بروید.م Extract کردن کامپوننت هامیتوانیم کامپوننت ها را به کامپوننت های کوچکتر خرد کنیم. برای مثال در کد زیر: function Comment(props) { return ( <div className="Comment"> <div className="UserInfo"> <img className="Avatar" src={props.author.avatarUrl} alt={props.author.name} /> <div className="UserInfo-name"> {props.author.name} </div> </div> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }میتوانیم کامپوننت Avatar و UserInfo را جداگانه تعریف کنیم: function Avatar(props) { return ( <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> ); } function UserInfo(props) { return ( <div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> ); } function Comment(props) { return ( <div className="Comment"> <UserInfo user={props.author} /> <div className="Comment-text"> {props.text} </div> <div className="Comment-date"> {formatDate(props.date)} </div> </div> ); }لازم نیست کامپوننت Avatar بداند جزوی از Comment است. بنابراین در قسمت props آن به جای author از user استفاده کرده ایم. موقع نام گذاری props ها از دید خود کامپوننت نام گذاری کنید، نه از دید کل context ای که در آن استفاده میشود.م prop ها Read-Only هستند.چه کامپوننت به صورت کلاس تعریف شود چه تابع، نباید prop های خودش را تغیر دهد.برای مثال تابع sum زیر یک pure است چون ورودی هایش را تغییر نمیدهد و همیشه برای ورودی یکسان نتیجه یکسان دارد:function sum(a, b){return a+b;} اما تابع withdraw زیر impure است چون ورودی های خودش را تغییر میدهد:function withdraw(account, amount) { account.total -= amount; }مهم: همه کامپوننت های React باید مثل یک تابع pure باشند.به طور حتما UI اپلیکیشن ها پویا است و در زمان تغییر میکند. بعدا مفوم state را می آموزیم که بدون زیر پا گذاشتن این قانون اجازه میدهد کامپوننت های React بر اساس کاری که کاربر میکند، یا بر اساس network یا غیره خروجی شان را در زمان تغییر دهند.