ReactJS - ส่วนประกอบ

ในบทนี้เราจะเรียนรู้วิธีการรวมส่วนประกอบเพื่อให้ดูแลรักษาแอปได้ง่ายขึ้น วิธีนี้ช่วยให้อัปเดตและเปลี่ยนแปลงส่วนประกอบของคุณโดยไม่ส่งผลกระทบต่อส่วนที่เหลือของหน้า

ตัวอย่างไร้สัญชาติ

ส่วนประกอบแรกของเราในตัวอย่างต่อไปนี้คือ App. ส่วนประกอบนี้เป็นเจ้าของHeader และ Content. เรากำลังสร้างHeader และ Content แยกจากกันและเพิ่มเข้าไปในโครงสร้าง JSX ในไฟล์ Appส่วนประกอบ. เท่านั้นApp ต้องส่งออกส่วนประกอบ

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;

เพื่อให้สามารถแสดงสิ่งนี้บนหน้าได้เราจำเป็นต้องนำเข้า main.js ไฟล์และโทร reactDOM.render(). เราทำสิ่งนี้ไปแล้วในขณะที่กำหนดสภาพแวดล้อม

main.js

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

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

โค้ดด้านบนจะสร้างผลลัพธ์ต่อไปนี้

ตัวอย่างสถานะ

ในตัวอย่างนี้เราจะตั้งค่าสถานะสำหรับองค์ประกอบของเจ้าของ (App). Headerคอมโพเนนต์เพิ่งถูกเพิ่มเหมือนในตัวอย่างสุดท้ายเนื่องจากไม่จำเป็นต้องมีสถานะใด ๆ เรากำลังสร้างแทนแท็กเนื้อหาtable และ tbody องค์ประกอบที่เราจะแทรกแบบไดนามิก TableRow สำหรับทุกวัตถุจาก data อาร์เรย์

จะเห็นได้ว่าเรากำลังใช้ EcmaScript 2015 arrow syntax (=>) ซึ่งดูสะอาดตากว่าไวยากรณ์ JavaScript แบบเก่า สิ่งนี้จะช่วยให้เราสร้างองค์ประกอบของเราโดยใช้โค้ดน้อยลง มีประโยชน์อย่างยิ่งเมื่อเราต้องสร้างรายการที่มีรายการจำนวนมาก

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 - สังเกตว่าเรากำลังใช้ key = {i} inside map()ฟังก์ชัน สิ่งนี้จะช่วยให้ React อัปเดตเฉพาะองค์ประกอบที่จำเป็นแทนที่จะแสดงรายการทั้งหมดเมื่อมีการเปลี่ยนแปลง เป็นการเพิ่มประสิทธิภาพอย่างมากสำหรับองค์ประกอบที่สร้างขึ้นแบบไดนามิกจำนวนมาก