Perkara yang Saya Ingin Saya Tahu Apabila Saya Mula dengan React

Pengajaran dari 3 Tahun Perkembangan Reaksi

Apabila saya mula-mula terjun ke React, rasanya seperti membuka kotak Pandora. Terdapat banyak perkara yang perlu dipelajari, dan sepanjang perjalanan, saya menemui banyak "Aha!" detik-detik. Berikut ialah 10 perkara yang saya harap saya tahu semasa saya bermula, untuk membantu anda melangkau beberapa lonjakan kelajuan dalam perjalanan React anda.

1. Komponen Hanya Berfungsi

Kesedaran yang paling penting? Komponen tindak balas hanyalah fungsi JavaScript. Anda memberikan prop sebagai argumen, dan ia mengembalikan JSX, yang kelihatan seperti HTML tetapi tidak. Sebaik sahaja anda memikirkan komponen dengan cara ini, memahami konsep seperti prop dan keadaan menjadi lebih mudah.

const MyComponent = (props) => {
  return <h1>{props.title}</h1>;
};

2. Negeri dan Props Berbeza

Ini mungkin kelihatan asas sekarang, tetapi pada awalnya, perbezaan antara prop dan keadaan tidak jelas kepada saya. Berikut ialah penyegaran pantas:

• Prop adalah luaran dan tidak boleh diubah (data yang anda hantar ke komponen).
• Keadaan adalah dalaman dan boleh berubah (diuruskan dalam komponen).

Apabila ragu-ragu: Jika data datang daripada induk, itu adalah prop. Jika data berada di dalam komponen, ia dinyatakan.

3. Cangkuk Mengubah Permainan

Apabila React memperkenalkan cangkuk, ia adalah penukar permainan. Daripada menyesuaikan kaedah kitaran hayat, anda kini boleh mengurus keadaan dan kesan sampingan dengan mudah menggunakan cangkuk seperti useState dan useEffect. Saya harap saya tahu betapa hebat dan mudahnya cangkuk ini boleh membuat kod saya dari awal.

const [count, setCount] = useState(0);
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

4. Memahami DOM Maya

Saya tidak memahami sepenuhnya cara DOM Maya React berfungsi sehingga kemudian, dan itu adalah satu kesilapan. Kecekapan React datang daripada mengemas kini DOM Maya dan bukannya DOM sebenar secara langsung. Dengan membezakan perubahan, React hanya mengemas kini perkara yang perlu, menjadikan apl anda pantas.

5. Komponen Komposisi Daripada Pewarisan

React lebih mengutamakan komposisi komponen (komponen bersarang di dalam satu sama lain) dan bukannya warisan berasaskan kelas. Jika anda perlu menggunakan semula logik merentas komponen, lebih baik anda mengekstraknya ke dalam komponen boleh guna semula atau cangkuk tersuai daripada menggunakan warisan.

const Greeting = ({name}) => <h1>Hello, {name}!</h1>;
const Page = () => <Greeting name="John" />;

6. Mengurus Negeri Adalah Seni

Apabila apl anda berkembang, pengurusan negeri menjadi rumit. Keadaan komponen setempat berfungsi dengan baik untuk apl yang lebih kecil, tetapi untuk apl yang lebih besar, alatan seperti API Konteks atau pustaka seperti Redux membantu mengurus keadaan merentas keseluruhan aplikasi anda. Saya mula menggunakan Redux terlalu awal, tetapi saya kini tahu bila untuk bergantung pada penyelesaian yang lebih mudah seperti useContext atau useReducer sebelum memperkenalkan alatan yang lebih berat.

const MyContext = React.createContext();
const App = () => {
  return (
    <MyContext.Provider value={/* some value */}>
      <ComponentA />
    </MyContext.Provider>
  );
};

7. TypeScript Berbaloi dengan Usaha

Jika anda sedang mengusahakan pangkalan kod yang lebih besar, penggunaan TypeScript berbaloi dengan keluk pembelajaran. Ia boleh menghalang pepijat lebih awal dengan menguatkuasakan jenis, dan ia menjadikan kerjasama dengan pembangun lain lebih lancar. Saya bergelut dengan TypeScript pada mulanya, tetapi setelah saya menerimanya, kod React saya menjadi lebih mantap.

interface Props {
  title: string;
}
const MyComponent: React.FC<Props> = ({ title }) => {
  return <h1>{title}</h1>;
};

8. CSS-in-JS untuk Penggayaan Berskop

Apabila saya mula, saya bergelut dengan gaya global yang bertembung antara satu sama lain. Pustaka CSS-dalam-JS seperti komponen-gaya atau Emosi telah mengubah permainan untuk saya dengan membenarkan gaya berskop yang hidup bersama logik komponen.

import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

const App = () => <Button>Click Me</Button>;

9. Ujian Lebih Mudah Daripada Yang Anda Fikirkan

Menguji komponen React memang menakutkan, tetapi alatan seperti React Testing Library dan Jest memudahkannya. Tulis ujian untuk komponen penting untuk memastikan ia berkelakuan seperti yang diharapkan, dan anda akan berterima kasih kepada diri sendiri kemudian.

import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders the title', () => {
  const { getByText } = render(<MyComponent title="Hello" />);
  expect(getByText(/Hello/i)).toBeInTheDocument();
});

10. Perkara Pengoptimuman

Apabila apl anda berskala, anda pasti mahu mengoptimumkannya untuk prestasi. Teknik seperti memoisasi (React.memo), komponen memuatkan malas (React.lazy) dan kod pemisahan (React.Suspense) boleh meningkatkan pengalaman pengguna secara drastik. Persembahan tidak menjadi tumpuan saya sejak awal, tetapi ia sepatutnya untuk anda!

const LazyComponent = React.lazy(() => import('./LazyComponent'));

const App = () => (
  <React.Suspense fallback={<div>Loading...</div>}>
    <LazyComponent />
  </React.Suspense>
);

Pemikiran Akhir

React ialah alat yang hebat untuk membina UI dinamik, tetapi seperti mana-mana teknologi, ia datang dengan keluk pembelajaran. Terima asas, dan jangan segan untuk meneroka konsep lanjutan. Paling penting, teruskan membina!

Ini adalah 10 perkara yang saya harap saya tahu dari awal. Mudah-mudahan, ia dapat menjimatkan masa dan kekecewaan anda dalam perjalanan React anda.

---

Adakah ini membantu? Letakkan ulasan atau kongsi petua React anda sendiri di bawah!

Atas ialah kandungan terperinci Perkara yang Saya Ingin Saya Tahu Apabila Saya Mula dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!