Komponen React (Berasaskan Kelas vs Fungsian)

Komponen React ialah bahan binaan bagi mana-mana aplikasi React. Mereka membenarkan anda membahagikan UI kepada bahagian bebas yang boleh diguna semula yang boleh diurus dan dipaparkan secara berasingan. Komponen tindak balas terdapat dalam dua jenis utama: Komponen Fungsian dan Komponen Kelas.

Komponen Berfungsi
Komponen berfungsi lebih mudah dan ditulis sebagai fungsi JavaScript. Mereka mengambil prop (data input) sebagai hujah dan mengembalikan JSX, yang menerangkan rupa UI sepatutnya. Mulai React 16.8, komponen berfungsi juga boleh mengendalikan keadaan dan kesan sampingan menggunakan cangkuk seperti useState dan useEffect.

import React, { useState } from 'react';

const Welcome = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>You've clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Welcome;

Komponen Kelas
Komponen kelas ialah cara asal untuk menulis komponen dalam React. Mereka melanjutkan kelas React.Component dan mesti menyertakan kaedah render() yang mengembalikan JSX. Komponen kelas boleh mempunyai kaedah keadaan dan kitaran hayat mereka sendiri seperti componentDidMount, componentDidUpdate dan componentWillUnmount.

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}!</h1>
        <p>You've clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

export default Welcome;

Konsep Utama:

• JSX: Sambungan sintaks JavaScript yang kelihatan seperti HTML. Komponen bertindak balas mengembalikan JSX untuk menerangkan UI.
• Props: Singkatan untuk "properties", props membolehkan anda menghantar data daripada komponen induk kepada komponen anak.
• Nyatakan: Objek terbina dalam untuk menyimpan data dinamik yang mempengaruhi perkara yang dipaparkan dalam komponen. Hanya komponen yang menggunakan keadaan (sama ada komponen berfungsi atau kelas) boleh dipaparkan semula berdasarkan perubahan pada data ini.

Cakuk (untuk komponen berfungsi):

• useState: Membolehkan anda mengurus keadaan dalam komponen berfungsi.
• useEffect: Membolehkan anda melakukan kesan sampingan dalam komponen berfungsi (cth., mengambil data, mengemas kini DOM).

React menggalakkan penciptaan komponen kecil yang boleh digunakan semula yang boleh digabungkan untuk membentuk aplikasi yang lebih besar, mengekalkan asas kod modular dan lebih mudah diselenggara.

Atas ialah kandungan terperinci Komponen React (Berasaskan Kelas vs Fungsian). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!