ReactJS - Các thành phần

Trong chương này, chúng ta sẽ tìm hiểu cách kết hợp các thành phần để làm cho ứng dụng dễ bảo trì hơn. Cách tiếp cận này cho phép cập nhật và thay đổi các thành phần của bạn mà không ảnh hưởng đến phần còn lại của trang.

Ví dụ không trạng thái

Thành phần đầu tiên của chúng tôi trong ví dụ sau là App. Thành phần này là chủ sở hữu củaHeader và Content. Chúng tôi đang tạoHeader và Content riêng biệt và chỉ thêm nó vào bên trong cây JSX trong Appthành phần. Chỉ cóApp thành phần cần được xuất.

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;

Để có thể hiển thị điều này trên trang, chúng tôi cần nhập nó vào main.js gửi và gọi reactDOM.render(). Chúng tôi đã làm điều này trong khi thiết lập môi trường.

main.js

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

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

Đoạn mã trên sẽ tạo ra kết quả sau.

Ví dụ về trạng thái

Trong ví dụ này, chúng tôi sẽ đặt trạng thái cho thành phần chủ sở hữu (App). CácHeaderthành phần chỉ được thêm vào giống như trong ví dụ trước vì nó không cần bất kỳ trạng thái nào. Thay vì thẻ nội dung, chúng tôi đang tạotable và tbody phần tử, nơi chúng tôi sẽ chèn động TableRow cho mọi đối tượng từ data mảng.

Có thể thấy rằng chúng ta đang sử dụng cú pháp mũi tên (=>) của EcmaScript 2015 trông gọn gàng hơn nhiều so với cú pháp JavaScript cũ. Điều này sẽ giúp chúng tôi tạo các phần tử của mình với ít dòng mã hơn. Nó đặc biệt hữu ích khi chúng ta cần tạo một danh sách với rất nhiều mục.

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 - Lưu ý rằng chúng tôi đang sử dụng key = {i} inside map()chức năng. Điều này sẽ giúp React chỉ cập nhật các phần tử cần thiết thay vì hiển thị lại toàn bộ danh sách khi có điều gì đó thay đổi. Đó là một sự tăng hiệu suất rất lớn cho số lượng lớn hơn các phần tử được tạo động.