React
v16.13.1 LanguagesGitHub

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')
);

សាកល្បងនៅលើ CodePen

ចូរយើងសង្ខេបនូវអ្វីដែលកើតឡើងនៅក្នុងឧទាហរណ៍នេះ:

  1. យើង​ហៅ ReactDOM.render() ជាមួយនឹង <Welcome name="Sara" /> ធាតុ។
  2. React ហៅ Welcome component ជាមួយ {name: 'Sara'} ជា props។
  3. Welcome component របស់យើង ត្រឡប់ជាមួយ <h1>Hello, Sara</h1> ជាលទ្ធផល។
  4. 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')
);

សាកល្បងនៅលើ CodePen

ជាធម្មតា, កម្មវិធី 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>
  );
}

សាកល្បងនៅលើ CodePen

វាទទួលយក 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>
  );
}

សាកល្បងនៅលើ CodePen

ការទាញយក 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 ធ្វើសកម្មភាពផ្លាស់ប្តូរលទ្ធផលរបស់ខ្លួនក្នុងពេលឆ្លើយតបទៅនឹងសកម្មភាពរបស់អ្នកប្រើ ការឆ្លើយតបបណ្តាញ និងអ្វីផ្សេងទៀតដោយគ្មានការរំលោភលើច្បាប់នេះ។

Edit this page