Konsep Teras Asas Tindakbalas

Dalam dunia pembangunan web yang berkembang pesat, React kekal sebagai asas untuk membina antara muka pengguna yang dinamik dan berprestasi. Sama ada anda seorang pembangun berpengalaman atau baru bermula, memahami konsep teras React adalah penting untuk memanfaatkan potensi penuhnya. Dalam artikel ini, kami akan meneroka prinsip asas React, daripada status perpustakaannya kepada kuasa cangkuk, dan memberikan anda asas yang jelas untuk meningkatkan kemahiran React anda. Mari selami! ?

1. Adakah React Rangka Kerja atau Pustaka?

React ialah perpustakaan JavaScript, bukan rangka kerja. Tidak seperti rangka kerja, yang menyediakan set alat yang komprehensif dan menguatkuasakan cara tertentu untuk membina aplikasi, React memfokuskan pada aspek tertentu—perenderan UI. Ini menjadikan React sangat fleksibel dan popular, kerana ia mengikut falsafah Unix untuk melakukan satu perkara dan melakukannya dengan baik.

2. DOM Maya

DOM adalah singkatan dari Document Object Model dalam perkataan mudah yang mewakili UI aplikasi. Setiap kali apabila kami menukar UI, DOM dikemas kini untuk mewakili perubahan tersebut. DOM diwakili sebagai struktur data pokok. Apabila kami menukar UI, DOM memaparkan semula dan mengemas kini anak-anaknya. Paparan semula UI menjadikan aplikasi perlahan.

Untuk penyelesaian ini kami menggunakan DOM Maya. DOM maya hanyalah perwakilan maya DOM. Apabila keadaan aplikasi berubah, DOM Maya dikemas kini dan bukannya DOM sebenar.

DOM maya setiap kali mencipta pokok dan elemen diwakili sebagai nod. Jika mana-mana elemen berubah, pokok DOM maya baharu dicipta. Pokok baharu kemudiannya dibandingkan atau “dibezakan” dengan pokok sebelumnya.

Dalam imej ini, bulatan merah mewakili nod yang telah berubah. Nod ini mewakili elemen UI yang menukar keadaan. Kemudian bandingkan pokok sebelumnya dan pokok berubah semasa. Pohon yang dikemas kini kemudiannya dikemas kini secara kelompok kepada DOM sebenar. Ini menjadikan React menonjol sebagai pustaka JavaScript berprestasi tinggi.

Ringkasnya:

1. Seluruh DOM maya dikemas kini.
2. DOM maya dapat dibandingkan dengan rupa sebelum anda mengemas kininya. Bertindak balas memikirkan objek yang telah berubah.
3. Objek yang ditukar dan objek yang ditukar sahaja, dapatkan kemas kini pada DOM sebenar.
4. Perubahan pada DOM sebenar menyebabkan skrin berubah.

3. JSX

JSX (JavaScript XML) membolehkan anda menulis kod seperti HTML dalam React. Ia menukar teg HTML kepada elemen React menggunakan fungsi React.createElement( komponen, prop, …kanak-kanak).

Contohnya:
Kod JSX:

<MyText color="red">
  Hello, Good Morning!
</MyText>

Contoh ini disusun menjadi:

React.createElement(
  MyText,
  { color: 'red' },
  'Hello, Good Morning!'
)

Nota: Komponen yang ditentukan pengguna mesti bermula dengan huruf besar. Teg huruf kecil dianggap sebagai elemen HTML.

4. Props dalam JSX

Props boleh ditentukan dalam beberapa cara dalam JSX:

Ungkapan JavaScript sebagai Alat Peraga:

<SumComponent sum={1 + 2 + 3} />

Di sini, props.sum menilai kepada 6.

String Literal:

<TextComponent text={‘Good Morning!’} />

<TextComponent text=”Good Morning!” />

Kedua-dua contoh di atas adalah setara.

Prop Lalai kepada “Benar”
Jika kita tidak menghantar nilai untuk prop, ia lalai kepada benar.

Sebagai contoh,

<TextComponent prop/>

<TextComponent prop={true} />

Kedua-dua contoh di atas adalah setara.

5. Komponen Kelas

Komponen dalam React boleh ditakrifkan sebagai kelas atau fungsi. Begini caranya untuk menentukan komponen kelas:

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

6. Kitaran Hayat Komponen

Komponen mempunyai kaedah kitaran hayat yang boleh anda ganti untuk menjalankan kod pada peringkat tertentu:

Pemasangan: Apabila komponen sedang dibuat dan dimasukkan ke dalam DOM.

• pembina()
• render()
• componentDidMount()

Mengemas kini: Apabila prop atau keadaan berubah.

• render()
• componentDidUpdate()

Menyahlekap: Apabila komponen sedang dialih keluar daripada DOM.

• komponenWillUnmount()

7. Sifat Kelas

defaultProps membolehkan anda menentukan nilai lalai untuk prop:

class MyText extends React.Component {
  // Component code here
}

MyText.defaultProps = {
  color: 'gray'
};

Jika props.color tidak disediakan, ia lalai kepada 'kelabu'.

8. Jenis Prop

Kami boleh menggunakan jenis prop untuk menyemak jenis sifat komponen yang diluluskan. Ia memberikan ralat, apabila ia tidak sepadan.

import PropTypes from 'prop-types';

const studentPropTypes = {
  studentName: PropTypes.string,
  id: PropTypes.number
};

const props = {
  studentName: 'Asima',
  id: 'hi' // Invalid
};

PropTypes.checkPropTypes(studentPropTypes, props, 'prop', 'MyComponent');

Ini akan memberi amaran tentang jenis ketidakpadanan untuk id.

9. Mengoptimumkan Prestasi

React direka untuk prestasi, tetapi anda boleh mengoptimumkannya lagi:

Menggunakan Binaan Pengeluaran:

npm run build

This creates a production build with optimizations.

Minimize Source Code: Be cautious with changes to React's source code.

Code Splitting: Bundle JavaScript code into chunks to load as needed.

10. React Hooks

Hooks are functions that let you use state and other React features in function components. The two most popular hooks are:

useState: Adds state to function components.

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

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

useEffect: Manages side effects in function components.

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

React has continually evolved to meet the demands of modern web development, and mastering its core concepts is crucial for building efficient, scalable applications. From understanding how React differentiates itself as a library to harnessing the power of hooks for functional components, these fundamentals will set you on the path to React proficiency.

As you continue to explore and implement React in your projects, remember that staying updated with the latest practices and features will keep you ahead in the ever-changing tech landscape. If you found this article valuable, don’t forget to give it a like and share it with fellow developers eager to deepen their React knowledge!

Thank you for reading, and happy coding! ?

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