Components និង Props
Componentsអនុញ្ញាតឱ្យអ្នកបំបែក UI ទៅជាបំណែកឯករាជ្យ ដែលអាចប្រើឡើងវិញបាន ហើយគិតអំពីបំណែកនីមួយៗនៅក្នុងភាពឯកោ(isolation)។ ទំព័រនេះផ្តល់ការណែនាំអំពីគំនិតនៃcomponents. អ្នកអាចរក លំអិត component API លំអិតនៅទីនេះ.
គំនិត, components គឺដូចមុខងារ JavaScript. ពួកគេទទួលយកធាតុចូល (ហៅថា “props”) ហើយត្រឡប់ធាតុ React ពិពណ៌នាអំពីអ្វីដែលគួរលេចឡើងនៅលើអេក្រង់។
Function និង Class Components
វិធីសាមញ្ញបំផុតដើម្បីកំណត់ component គឺត្រូវសរសេរមុខងារ JavaScript:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
មុខងារនេះគឺជា React component ត្រឹមត្រូវ ដោយសារតែវាទទួលយក “props” តែមួយ(ដែលតំណាងឱ្យអចលនទ្រព្យ) objectជាមួយទិន្នន័យនិងត្រឡប់ធាតុReact ។ យើងហៅcomponentsដូចជា “function components” ដោយសារតែពួកគេគឺជាមុខងារព្យញ្ជនៈ JavaScript ។ អ្នកក៏អាចប្រើES6 class ដើម្បីកំណត់component:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
components ពីរខាងលើនេះគឺសមមូលនឹងទស្សនៈរបស់ React ។
Function និង Classes មានលក្ខណៈពិសេសបន្ថែមមួយចំនួនដែលយើងនឹងពិភាក្សានៅក្នុងផ្នែកបន្ទាប់.
ការបង្កើតComponent
កាលពីមុនយើងទើបតែជួបReactធាតុដែលតំណាងឱ្យស្លាក(tags) DOM:
const element = <div />;
ទោះយ៉ាងណាធាតុក៏អាចតំណាងឱ្យcomponentsដែលកំណត់ដោយអ្នកប្រើ:
const element = <Welcome name="Sara" />;
នៅពេលដែល React មើលឃើញ element ដែលតំណាងឱ្យ component ដែលកំណត់ដោយអ្នកប្រើប្រាស់, វាបញ្ជូន (passes) JSX attributes និង children ទៅអោយ component នេះជា single object។ យើងហៅ object នេះថា “props”។
ឧទាហរណ៏, កូដនេះធ្វើការមំលែងទៅជា “Hello, Sara” នៅលើទំព័រ:
function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;ReactDOM.render(
element,
document.getElementById('root')
);
ចូរយើងសង្ខេបនូវអ្វីដែលកើតឡើងនៅក្នុងឧទាហរណ៍នេះ:
- យើងហៅ
ReactDOM.render()
ជាមួយនឹង<Welcome name="Sara" />
ធាតុ។ - React ហៅ
Welcome
component ជាមួយ{name: 'Sara'}
ជា props។ Welcome
component របស់យើង ត្រឡប់ជាមួយ<h1>Hello, Sara</h1>
ជាលទ្ធផល។- React DOM ធ្វើឱ្យទាន់សម័យមានប្រសិទ្ធិភាព DOM ដើម្បីផ្គូផ្គង
<h1>Hello, Sara</h1>
.
ចំណាំ: តែងតែចាប់ផ្ដើមឈ្មោះ component ជាមួយអក្សរធំ។
Reactទាក់ទងនឹងcomponentsដែលចាប់ផ្ដើមដោយអក្សរតូចជាស្លាក DOM។ ឧទាហរណ៍
<div />
តំណាងឱ្យស្លាក HTML div ប៉ុន្តែ<Welcome />
តំណាងឱ្យcomponentនិងតម្រូវWelcome
នៅក្នុង scope។ដើម្បីរៀនថែមទៀតអំពីហេតុផលដែលនៅពីក្រោយអនុសញ្ញានេះ, សូមអាន JSX In Depth.
Composing Components
ComponentsអាចសំដៅទៅលើComponentsផ្សេងៗនៅក្នុងលទ្ធផលរបស់វា។ នេះអនុញ្ញាតឱ្យយើងប្រើ component abstraction ដូចគ្នាសម្រាប់កម្រិតលម្អិត។ ប៊ូតុង សំណុំបែបបទ dialog អេក្រង់: ក្នុងកម្មវិធីReactទាំងអស់ ដែលត្រូវបានគេបញ្ជាក់ជាទូទៅថាជាcomponents។
ឧទាហរណ៍, យើងអាចបង្កើត App
component ដែលបង្ហាញ Welcome
ជាច្រើនដង:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" /> <Welcome name="Cahal" /> <Welcome name="Edite" /> </div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
ជាធម្មតា, កម្មវិធី React ថ្មីមាន App
component តែមួយនៅកំពូលបំផុត. ទោះយ៉ាងណា, ប្រសិនបើអ្នកធ្វើសមាហរណកម្មបញ្ចូលគ្នាទៅក្នុងកម្មវិធីដែលមានស្រាប់ អ្នកអាចចាប់ផ្តើមពីតូចឡើងដោយមាន component តូចមួយដូចជា Button
ហើយជាបណ្តើរដំណើរ វិធីរបស់អ្នកទៅកំពូលនៃឋានានុក្រមទិដ្ឋភាព។
Extracting Components
កុំខ្លាចការចែក components ជា components តូចៗ។
ឧទាហរណ៍, ពិចារណា Comment
component នេះ:
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>
);
}
វាទទួលយក author (ជាវត្ថុ) text (ជាអក្សរ) និង date (ជាកាលបរិច្ឆេទ) ជាprops ហើយពិពណ៌នាអំពីមតិយោបល់នៅលើគេហទំព័រប្រព័ន្ធផ្សព្វផ្សាយសង្គមមួយ។
componentនេះអាចត្រូវបានផ្លាស់ប្តូរដោយសារតែnestingទាំងអស់, ហើយវាក៏លំបាកផងដែរក្នុងការប្រើឡើងវិញនូវផ្នែកមួយៗរបស់វា។ ចូរដកស្រង់componentsមួយចំនួនពីវា។
ដំបូងយើងនឹងស្រង់ Avatar
:
function Avatar(props) {
return (
<img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} /> );
}
Avatar មិនចាំបាច់ដឹងថាវាកំពុងត្រូវបានបង្ហាញនៅComment
នេះហើយជាមូលហេតុដែលយើងបានផ្តល់ឈ្មោះថ្មីរបស់ខ្លួនបន្ថែមទៀត user
ជាជាង author
.
យើងសូមផ្តល់យោបល់ដល់អ្នកប្រើឈ្មោះ props ពីចំណុចផ្ទាល់របស់ component ជាជាងបរិបទដែលវាកំពុងប្រើ។
ឥឡូវនេះយើងអាចមានភាពងាយស្រួលជាងមុនបន្តិច Comment
:
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} /> <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>
);
}
បន្ទាប់, យើងនឹងស្រង់ចេញនូវcomponent UserInfo
ដែលបង្ហាញ Avatar
នៅជាប់នឹងឈ្មោះអ្នកប្រើ:
function UserInfo(props) {
return (
<div className="UserInfo"> <Avatar user={props.user} /> <div className="UserInfo-name"> {props.user.name} </div> </div> );
}
នេះអនុញ្ញាតឱ្យយើងធ្វើឱ្ យComment
ងាយៗបន្ថែម:
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>
);
}
ការទាញយក components អាចមើលទៅដូចជាការងារដ៏ធុញទ្រាន់នៅពេលដំបូង ប៉ុន្តែវាមានភាពទូលំទូលាយនៃការប្រើ components ឡើងវិញ នៅក្នុងកម្មវិធីធំៗ។ ច្បាប់ល្អគឺថា ប្រសិនបើផ្នែកនៃ UI របស់អ្នកត្រូវបានប្រើច្រើនដង (Button
, Panel
, Avatar
) ឬស្មុគ្រស្មាញគ្រប់គ្រាន់ដោយ Component ខ្លួនឯង(App
, FeedStory
, Comment
) វាជាបេក្ខជនដ៏ល្អដើម្បីក្លាយជាcomponentប្រើម្តងទៀត។
Props គឺមិនអាចកែសម្រួល
ថាតើអ្នកប្រកាស component ជា មុខងារ ឬ class, វាមិនត្រូវផ្លាស់ប្តូរpropsរបស់វាទេ។ ពិចារណាលើមុខងារ sum
នេះ:
function sum(a, b) {
return a + b;
}
មុខងារបែបនេះត្រូវបានហៅ “pure” ដោយសារតែពួកគេមិនបានព្យាយាមផ្លាស់ប្តូរធាតុចូលរបស់ពួកគេ, ហើយតែងតែត្រឡប់លទ្ធផលដដែលៗសម្រាប់ធាតុបញ្ចូលដូចគ្នា។
ផ្ទុយមកវិញ មុខងារនេះគឺមិនប្រឡាក់ទេព្រោះវាផ្លាស់ប្តូរការបញ្ចូលរបស់វាផ្ទាល់:
function withdraw(account, amount) {
account.total -= amount;
}
Reactមានភាពបត់បែនណាស់ប៉ុន្តែវាក៏មានច្បាប់តឹងតែងមួយដែរ:
React components ទាំងអស់ត្រូវតែដើរតួរឆ្លើយតបដូចជាមុខងារ pure ដែលទាក់ទងទៅនឹង props របស់ពួកគេ។
ជាការពិតកម្មវិធី UI របស់កម្មវិធីគឺមានថាមភាពនិងផ្លាស់ប្តូរតាមពេលវេលា។ ក្នុង ផ្នែកបន្ទាប់, យើងនឹងណែនាំគំនិតថ្មីនៃ “state”។ State អនុញ្ញាតឱ្យ components ធ្វើសកម្មភាពផ្លាស់ប្តូរលទ្ធផលរបស់ខ្លួនក្នុងពេលឆ្លើយតបទៅនឹងសកម្មភាពរបស់អ្នកប្រើ ការឆ្លើយតបបណ្តាញ និងអ្វីផ្សេងទៀតដោយគ្មានការរំលោភលើច្បាប់នេះ។