Terma dan Fungsi dalam React.js

React.js, biasanya dirujuk sebagai React, ialah pustaka JavaScript berkuasa yang digunakan untuk membina antara muka pengguna, terutamanya untuk aplikasi satu halaman (SPA). Ia membolehkan pembangun mencipta UI yang kompleks dengan memecahkannya kepada komponen yang lebih kecil dan boleh digunakan semula. Untuk memanfaatkan sepenuhnya kuasa React, adalah penting untuk memahami terma dan fungsi terasnya. Dalam artikel ini, kami akan membahagikan beberapa konsep, istilah dan fungsi utama yang perlu anda ketahui semasa bekerja dengan React.js.

1. Komponen

Komponen Fungsi:

Komponen fungsi ialah cara paling biasa untuk menentukan komponen React hari ini. Ia hanyalah fungsi JavaScript yang mengembalikan JSX (JavaScript XML) yang mewakili UI. Komponen fungsi juga boleh menggunakan React Hooks untuk menguruskan keadaan dan kesan sampingan.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Komponen Kelas:

Sebelum pengenalan React Hooks, komponen kelas adalah cara utama untuk mengurus keadaan komponen dan kaedah kitaran hayat. Walaupun ia masih digunakan secara meluas, komponen fungsi dengan cangkuk kini menjadi kaedah pilihan.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

2. JSX (JavaScript XML)

JSX ialah sambungan sintaks untuk JavaScript yang membolehkan anda menulis kod seperti HTML terus dalam JavaScript. React menggunakan JSX untuk menerangkan rupa UI sepatutnya. Walaupun ia kelihatan seperti HTML, JSX disusun ke dalam JavaScript di bawah hud.

const element = <h1>Hello, JSX!</h1>;

Anda juga boleh membenamkan ungkapan JavaScript di dalam JSX dengan membungkusnya dalam pendakap kerinting:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

3. Negeri

State ialah objek React terbina dalam yang digunakan untuk menyimpan maklumat tentang situasi semasa komponen. Setiap komponen boleh mengurus keadaannya sendiri dan memaparkan semula apabila keadaan itu berubah. Komponen fungsi menggunakan cangkuk useState untuk mengurus keadaan, manakala komponen kelas menggunakan objek this.state.

Contoh dengan useState (Komponen Fungsi):

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Contoh dengan this.state (Komponen Kelas):

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

4. Prop (Properti)

Prop digunakan untuk menghantar data dari satu komponen ke komponen yang lain. Mereka seperti hujah fungsi yang membolehkan komponen berkomunikasi antara satu sama lain. Props adalah baca sahaja dan tidak boleh diubah suai oleh komponen penerima.

Contoh:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

Dalam contoh ini, komponen Selamat Datang menerima prop nama daripada komponen Apl dan menjadikan "Hello, React".

5. Kail

Cangkuk ialah fungsi yang membolehkan anda "mencantumkan" keadaan Bertindak balas dan ciri kitaran hayat dalam komponen fungsi. Dua cangkuk yang paling biasa digunakan ialah:

useState:

Membolehkan anda menambah keadaan kepada komponen fungsi.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

useEffect:

Mengendalikan kesan sampingan seperti pengambilan data, langganan atau menukar DOM secara manual selepas setiap pemaparan.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Kail lain yang biasa digunakan termasuk useContext, useReducer, useRef dan useCallback.

6. DOM maya

React menggunakan DOM Maya, salinan ringan DOM sebenar, untuk mengoptimumkan kemas kini UI. Daripada memanipulasi DOM sebenar secara langsung, React mengemas kini DOM maya dahulu dan kemudian memikirkan perubahan minimum yang diperlukan untuk menyegerakkan DOM sebenar dengan versi maya. Proses ini dipanggil rekonsiliasi dan meningkatkan prestasi dengan ketara, terutamanya dalam aplikasi besar.

7. Kaedah Kitar Hayat (Komponen Kelas)

Kaedah kitar hayat ialah kaedah khas dalam komponen kelas yang membolehkan anda menyambung ke peringkat berbeza dalam hayat komponen (memaparkan, mengemas kini dan menyahlekap). Beberapa kaedah kitaran hayat yang penting termasuk:

• componentDidMount(): Dipanggil sekali selepas komponen telah dipasang pada DOM. Digunakan untuk pengambilan data awal atau langganan.

• componentDidUpdate(): Dipanggil selepas setiap pemaparan semula. Digunakan untuk melakukan kemas kini berdasarkan perubahan keadaan atau prop.

• componentWillUnmount(): Dipanggil sejurus sebelum komponen dialih keluar daripada DOM. Digunakan untuk tugas pembersihan seperti membatalkan panggilan API atau mengalih keluar pendengar acara.

Dalam komponen fungsi, anda boleh mencapai kefungsian yang sama menggunakan useEffect.

8. Rendering Bersyarat

Dalam React, anda boleh membuat komponen atau elemen secara bersyarat berdasarkan keadaan atau prop. Kaedah yang paling biasa ialah menggunakan operator ternary JavaScript.

Contoh:

const element = <h1>Hello, JSX!</h1>;

Pendekatan lain untuk pemaparan bersyarat termasuk menggunakan pernyataan if atau litar pintas (&&) dalam JSX.

9. Senarai dan Kunci

Dalam React, senarai elemen dibuat menggunakan kaedah .map(). Setiap item dalam senarai harus mempunyai prop "kunci" unik untuk membantu React mengoptimumkan pemaparan.

Contoh:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

Kunci hendaklah unik dan stabil, membantu React mengenal pasti item mana yang telah diubah, ditambah atau dialih keluar.

10. Borang dan Komponen Terkawal

Dalam React, borang biasanya dikendalikan menggunakan komponen terkawal, dengan unsur bentuk (seperti input) dikawal oleh keadaan React. Ini membolehkan React mengawal sepenuhnya nilai unsur bentuk.

Contoh:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Dalam contoh ini, nilai input dikawal oleh keadaan React, memastikan sebarang perubahan dalam medan input ditangkap dalam masa nyata.

11. API Konteks

API Konteks membolehkan anda berkongsi keadaan atau data antara komponen tanpa perlu menurunkan props secara manual pada setiap peringkat (juga dikenali sebagai "penggerudian prop"). Ia amat berguna apabila anda perlu menghantar data global (seperti pengesahan pengguna atau tetapan tema) ke seluruh apl anda.

Contoh:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Kesimpulan

React.js menawarkan pelbagai ciri dan syarat untuk dikuasai. Daripada asas komponen, JSX, keadaan dan prop kepada konsep yang lebih maju seperti cangkuk, konteks dan kaedah kitaran hayat, React menyediakan rangka kerja yang fleksibel dan berskala untuk membina aplikasi web moden. Memahami konsep dan istilah utama ini akan membolehkan anda membuka kunci potensi penuh React dan membina antara muka pengguna yang teguh, boleh diselenggara dan dinamik.

Atas ialah kandungan terperinci Terma dan Fungsi dalam React.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!