Rumah >hujung hadapan web >tutorial js >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.
Atas ialah kandungan terperinci Asas React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!