Ambilan Utama daripada Ulasan Terkini Saya tentang React Docs

Blog ini pada asalnya disiarkan di Medium

Hai, rakan-rakan peminat React! Saya baru-baru ini menyelami dokumentasi React dan ingin berkongsi pembelajaran saya dengan anda. Ini adalah panduan minima ringkas untuk mereka yang ingin membina asas yang kukuh dalam React. Mari kita pecahkan konsep teras dengan penerangan ringkas dan coretan kod.

Ini akan menjadi cerita yang agak panjang, tetapi sila teruskan untuk memahami semua konsep teras React sekaligus. Anda akan mendapati berfaedah untuk meringkas dan menyemak semula konsep ini untuk kemajuan selanjutnya.

Jadual Kandungan

• Berfikir dalam Reaksi
• Komponen dan JSX
• Prop
• Pemarahan Bersyarat
• Senarai Rendering
• Komponen Tulen
• Pokok UI
• Interaktiviti dan Pengendali Acara
• Negeri
• Komponen Terkawal
• Komponen Tidak Terkawal
• Ruj
• Mencegah Gelagat Lalai
• Penyebaran Acara
• Mengurus Negeri Kompleks
• Konteks
• Kesan Sampingan
• Amalan terbaik penggunaanEffect
• Peraturan Reaksi
• Cangkuk Tersuai
• Peraturan Cangkuk

Berfikir dalam React

React adalah tentang memecahkan UI anda kepada komponen yang boleh diguna semula. Apabila membina apl React, mulakan dengan:

1. Memecahkan UI kepada hierarki komponen
2. Membina versi statik tanpa interaktiviti
3. Mengenal pasti perwakilan minimum keadaan UI
4. Menentukan di mana negeri anda patut tinggal
5. Menambah aliran data songsang

Rujukan: https://react.dev/learn/thinking-in-react

Komponen dan JSX

Komponen ialah blok bangunan aplikasi React. Ia boleh berfungsi atau berasaskan kelas (kuno, tidak disyorkan). JSX ialah sambungan sintaks yang membolehkan anda menulis kod seperti HTML dalam JavaScript anda.

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

Rujukan:

• Komponen: https://react.dev/learn/your-first-component
• JSX: https://react.dev/learn/writing-markup-with-jsx

Props

Props ialah cara kami menghantar data daripada komponen induk kepada anak. Ia adalah baca sahaja dan membantu memastikan komponen kami tulen.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

Rujukan: https://react.dev/learn/passing-props-to-a-component

Rendering Bersyarat

React membolehkan anda membuat komponen atau elemen secara bersyarat berdasarkan syarat tertentu.

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

Rujukan: https://react.dev/learn/conditional-rendering

Senarai Rendering

Gunakan fungsi map() untuk memaparkan senarai elemen dalam React. Jangan lupa tambahkan prop kunci unik pada setiap item.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

Rujukan: https://react.dev/learn/rendering-lists

Komponen Tulen

Komponen tulen sentiasa menghasilkan output yang sama untuk prop dan keadaan yang sama. Ia boleh diramal dan lebih mudah untuk diuji.

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

Rujukan: https://react.dev/learn/keeping-components-pure

Pokok UI

React membina dan mengekalkan perwakilan dalaman UI anda yang dipanggil DOM maya. Ini membolehkan React mengemas kini hanya bahagian DOM sebenar yang telah berubah dengan cekap.

Rujukan: https://react.dev/learn/understanding-your-ui-as-a-tree

Interaktiviti dan Pengendali Acara

React menggunakan peristiwa sintetik untuk mengendalikan interaksi pengguna secara konsisten merentas penyemak imbas yang berbeza.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

Rujukan: https://react.dev/learn/responding-to-events

negeri

Keadaan digunakan untuk data yang berubah dari semasa ke semasa dalam komponen. Gunakan cangkuk useState untuk menambah keadaan pada komponen berfungsi.

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

Rujukan: https://react.dev/learn/state-a-components-memory

Komponen Terkawal

Komponen terkawal mempunyai keadaannya dikawal oleh React.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

Komponen Tidak Terkawal

Komponen tidak terkawal mengurus keadaannya terus pada DOM.

function PureComponent(props) {
  return <div>{props.value}</div>;
}

Ruj

Ruj menyediakan cara untuk mengakses nod DOM atau elemen React yang dibuat dalam kaedah pemaparan.

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

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

Mencegah Gelagat Lalai

Gunakan preventDefault() untuk menghentikan gelagat penyemak imbas lalai untuk acara tertentu.

import React, { 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>
  );
}

Penyebaran Peristiwa

Peristiwa tindak balas disebarkan sama seperti acara DOM asli. Anda boleh menggunakan stopPropagation() untuk mengelakkan acara menggelegak.

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Mengurus Negeri Kompleks

Pertimbangkan untuk menggunakan cangkuk useReducer atau pustaka pengurusan keadaan seperti Redux atau Zustand untuk logik keadaan yang kompleks.

function UncontrolledInput() {
  return <input defaultValue="Hello" />;
}

Konteks

Konteks menyediakan cara untuk menghantar data melalui pepohon komponen tanpa perlu menurunkan props secara manual di setiap peringkat.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Rujukan: https://react.dev/learn/passing-data-deeply-with-context

Kesan Sampingan

Kesan sampingan ialah operasi yang mempengaruhi sesuatu di luar skop fungsi yang sedang dilaksanakan, seperti pengambilan data atau manipulasi DOM. Gunakan cangkuk useEffect untuk menguruskan kesan sampingan.

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Amalan terbaik penggunaanEffect

1. Sentiasa sertakan semua pembolehubah yang bergantung pada kesan anda dalam tatasusunan kebergantungan.
2. Elakkan gelung tak terhingga dengan mempertimbangkan dengan teliti kebergantungan kesan anda.
3. Membersihkan kesan sampingan dalam fungsi kembali useEffect.

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

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

Rujukan:

• Anda Mungkin Tidak Perlu useEffect: https://react.dev/learn/you-might-not-need-an-effect
• Menyegerakkan dengan Kesan: https://react.dev/learn/synchronizing-with-effects
• Kitaran Hayat Kesan Reaktif: https://react.dev/learn/lifecycle-of-reactive-effects

Peraturan Reaksi

1. Sentiasa mulakan nama komponen dengan huruf besar.
2. Tutup semua teg, termasuk teg menutup sendiri.
3. Jangan ubah suai prop secara langsung.
4. Pastikan komponen tulen apabila boleh.

Rujukan: https://react.dev/reference/rules

Cangkuk Tersuai

Cakuk tersuai membolehkan anda mengekstrak logik komponen ke dalam fungsi boleh guna semula.

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

Peraturan Mata Kail

1. Hanya panggil cangkuk di peringkat atas komponen anda.
2. Hanya panggil cangkuk daripada komponen fungsi React atau cangkuk tersuai.
3. Gunakan eslint-plugin-react-hooks untuk menguatkuasakan peraturan ini.

Rujukan: https://react.dev/reference/rules/rules-of-hooks

Itulah penutup dalam perjalanan React kami! Ingat, cara terbaik untuk belajar adalah dengan melakukan. Mula membina projek, bereksperimen dengan konsep ini dan jangan takut untuk menyelami dokumentasi React apabila anda memerlukan butiran lanjut. Selamat mengekod!

Atas ialah kandungan terperinci Ambilan Utama daripada Ulasan Terkini Saya tentang React Docs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!