ReactJS - Komponen

Dalam bab ini, kita akan mempelajari cara menggabungkan komponen untuk membuat aplikasi lebih mudah dipelihara. Pendekatan ini memungkinkan untuk memperbarui dan mengubah komponen Anda tanpa mempengaruhi bagian halaman lainnya.

Contoh Stateless

Komponen pertama kita pada contoh berikut adalah App. Komponen ini adalah pemilikHeader dan Content. Kami sedang menciptakanHeader dan Content secara terpisah dan hanya menambahkannya di dalam pohon JSX di file Appkomponen. HanyaApp komponen perlu diekspor.

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            <Header/>
            <Content/>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <h2>Content</h2>
            <p>The content text!!!</p>
         </div>
      );
   }
}
export default App;

Untuk dapat membuat ini di halaman, kita perlu mengimpornya main.js mengajukan dan menelepon reactDOM.render(). Kami sudah melakukan ini saat mengatur lingkungan.

main.js

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

ReactDOM.render(<App />, document.getElementById('app'));

Kode di atas akan menghasilkan hasil sebagai berikut.

Contoh Stateful

Dalam contoh ini, kita akan mengatur status untuk komponen pemilik (App). ItuHeaderkomponen baru saja ditambahkan seperti pada contoh terakhir karena tidak memerlukan status apa pun. Alih-alih tag konten, kami membuattable dan tbody elemen, di mana kami akan memasukkan secara dinamis TableRow untuk setiap objek dari data Himpunan.

Dapat dilihat bahwa kami menggunakan sintaks panah EcmaScript 2015 (=>) yang terlihat jauh lebih bersih daripada sintaks JavaScript lama. Ini akan membantu kami membuat elemen kami dengan lebih sedikit baris kode. Ini sangat berguna ketika kita perlu membuat daftar dengan banyak item.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor() {
      super();
      this.state = {
         data: 
         [
            {
               "id":1,
               "name":"Foo",
               "age":"20"
            },
            {
               "id":2,
               "name":"Bar",
               "age":"30"
            },
            {
               "id":3,
               "name":"Baz",
               "age":"40"
            }
         ]
      }
   }
   render() {
      return (
         <div>
            <Header/>
            <table>
               <tbody>
                  {this.state.data.map((person, i) => <TableRow key = {i} 
                     data = {person} />)}
               </tbody>
            </table>
         </div>
      );
   }
}
class Header extends React.Component {
   render() {
      return (
         <div>
            <h1>Header</h1>
         </div>
      );
   }
}
class TableRow extends React.Component {
   render() {
      return (
         <tr>
            <td>{this.props.data.id}</td>
            <td>{this.props.data.name}</td>
            <td>{this.props.data.age}</td>
         </tr>
      );
   }
}
export default App;

main.js

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

ReactDOM.render(<App/>, document.getElementById('app'));

Note - Perhatikan yang kami gunakan key = {i} inside map()fungsi. Ini akan membantu React untuk memperbarui hanya elemen yang diperlukan alih-alih merender ulang seluruh daftar ketika ada perubahan. Ini adalah peningkatan kinerja yang sangat besar untuk sejumlah besar elemen yang dibuat secara dinamis.