Asas React

Berikut ialah penjelasan terminologi React utama dengan contoh:

1. Komponen

Komponen ialah blok binaan aplikasi React. Ia adalah fungsi atau kelas JavaScript yang mengembalikan sebahagian daripada UI (Antara Muka Pengguna).

Komponen Berfungsi (biasa dalam Reaksi moden):

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

Komponen Kelas (gaya lama):

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

2. JSX (JavaScript XML)

JSX membolehkan anda menulis sintaks seperti HTML di dalam JavaScript. Ia adalah gula sintaksis untuk React.createElement().

Contoh:

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

JSX is compiled to:

const element = React.createElement('h1', null, 'Hello, world!');

3. Props (Properties)

Props ialah cara data dihantar dari satu komponen ke komponen yang lain. Ia adalah baca sahaja dan membenarkan komponen menjadi dinamik.

Contoh:

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

<Greeting name="Alice" />

4. Negeri

State ialah objek JavaScript yang menyimpan data dinamik dan mempengaruhi output yang diberikan bagi komponen. Ia boleh dikemas kini dengan setState (komponen kelas) atau cangkuk useState (komponen berfungsi).

Contoh dengan useState dalam komponen berfungsi:

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>
  );
}

5. Cangkuk

Cangkuk ialah fungsi yang membolehkan anda menggunakan keadaan dan ciri React lain dalam komponen berfungsi.

useState: Mengurus keadaan dalam komponen berfungsi.
useEffect: Menjalankan kesan sampingan dalam komponen berfungsi.

Contoh Kesan penggunaan:

import { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(seconds => seconds + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds have passed.</h1>;
}

6. DOM Maya

DOM Maya ialah salinan ringan DOM sebenar. React menggunakan ini untuk menjejaki perubahan dan mengemas kini UI dengan cekap dengan hanya memaparkan semula bahagian DOM yang berubah, bukannya keseluruhan halaman.

7. Pengendalian Acara

React menggunakan camelCase untuk pengendali acara dan bukannya huruf kecil dan anda meneruskan fungsi sebagai pengendali acara dan bukannya rentetan.

Example:

function ActionButton() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click me</button>;
}

8. Memaparkan

Rendering ialah proses React mengeluarkan elemen DOM ke penyemak imbas. Komponen memaparkan UI berdasarkan prop, keadaan dan data lain.

Contoh:

import ReactDOM from 'react-dom';

function App() {
  return <h1>Hello, React!</h1>;
}

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

9. Paparan Bersyarat

Anda boleh memaparkan komponen atau elemen yang berbeza berdasarkan syarat.

Contoh:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

10. Senarai dan Kunci

Dalam React, anda boleh memaparkan senarai data menggunakan kaedah map() dan setiap item senarai harus mempunyai kunci unik.

Contoh:

function ItemList(props) {
  const items = props.items;
  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' }
];

<ItemList items={items} />;

11. Meningkatkan Negeri

Kadangkala, berbilang komponen perlu berkongsi keadaan yang sama. Anda "mengangkat negeri" kepada nenek moyang terdekat mereka supaya ia boleh diturunkan sebagai prop.

Contoh:

function TemperatureInput({ temperature, onTemperatureChange }) {
  return (
    <input
      type="text"
      value={temperature}
      onChange={e => onTemperatureChange(e.target.value)}
    />
  );
}

function Calculator() {
  const [temperature, setTemperature] = useState('');

  return (
    <div>
      <TemperatureInput
        temperature={temperature}
        onTemperatureChange={setTemperature}
      />
      <p>The temperature is {temperature}°C.</p>
    </div>
  );
}

Ini adalah konsep asas yang membentuk asas pembangunan React.

Asas React Bahagian 2

Pranav Bakare ・ 18 Sep

#javascript #react

Atas ialah kandungan terperinci Asas React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!