當我開始使用 React 時我希望知道的事情-js教程-PHP中文網

Things I Wish I Knew When I Started with React

3 年 React 開發的經驗教訓

當我第一次投入 React 時，感覺就像打開了潘朵拉魔盒。有很多東西要學，一路上，我遇到了很多「啊哈！」的情況。時刻。以下是我希望在開始時就知道的 10 件事，以幫助您在 React 之旅中跳過一些減速帶。

1. 元件只是函數

最重要的認識是什麼？ React 元件只是 JavaScript 函數。你將 props 作為參數傳遞，它們傳回 JSX，它看起來像 HTML，但事實並非如此。一旦您以這種方式思考組件，理解 props 和 state 等概念就會變得更加簡單。

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

登入後複製

2. State 和 Props 不同

這現在看起來可能很基礎，但在早期，props 和 state 之間的差異對我來說並不明顯。這是一個快速回顧：

Props 是外部的且不可變的（傳遞給組件的資料）。
狀態是內部的且可變的（在組件內管理）。

如有疑問：如果資料來自父級，那麼它就是 props。如果資料存在於元件內部，那麼它就是狀態。

3. Hooks 正在改變遊戲規則

當 React 引入 hooks 時，它改變了遊戲規則。現在您可以使用 useState 和 useEffect 等掛鉤輕鬆管理狀態和副作用，而不是雜耍生命週期方法。我希望我從一開始就知道這些鉤子可以讓我的程式碼變得多麼強大和簡單。

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

登入後複製

4. 了解虛擬 DOM

直到後來我才完全理解 React 的 Virtual DOM 是如何運作的，這是一個錯誤。 React 的效率來自於更新虛擬 DOM，而不是直接更新真實 DOM。透過比較更改，React 僅更新必要的內容，從而使您的應用程式更快。

5. 組件組合優於繼承

React 支援元件組合（將元件嵌套在彼此內部）而不是基於類別的繼承。如果您需要跨元件重複使用邏輯，最好將其提取到可重複使用元件或自訂掛鉤中，而不是使用繼承。

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

登入後複製

6. 管理狀態是一門藝術

隨著應用程式的成長，狀態管理變得很棘手。本機元件狀態適用於較小的應用程序，但對於較大的應用程序，Context API 等工具或 Redux 等函式庫可協助管理整個應用程式的狀態。我開始使用 Redux 太早了，但我現在知道在引入更重的工具之前何時應該依靠 useContext 或 useReducer 等更簡單的解決方案。

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

登入後複製

7. TypeScript 值得付出努力

如果您正在開發更大的程式碼庫，那麼採用 TypeScript 值得學習。它可以透過強制類型來儘早防止錯誤，並且可以使與其他開發人員的協作更加順暢。一開始我對 TypeScript 很掙扎，但一旦我接受了它，我的 React 程式碼就變得更加健壯。

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

登入後複製

8. 用於範圍樣式的 CSS-in-JS

剛開始時，我一直在努力應對相互衝突的全球風格。 CSS-in-JS 函式庫（例如 styled-components 或 Emotion）透過允許作用域樣式與元件邏輯共存，改變了我的遊戲規則。

import styled from 'styled-components';

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

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

登入後複製

9. 測試比你想像的容易

測試 React 元件是令人生畏的，但像 React 測試庫和 Jest 這樣的工具可以讓這一切變得簡單。為重要組件編寫測試以確保它們按預期運行，稍後您會感謝自己。

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. 最佳化很重要

隨著應用程式的擴展，您需要對其效能進行最佳化。記憶化 (React.memo)、延遲載入元件 (React.lazy) 和分割程式碼 (React.Suspense) 等技術可以大幅改善使用者體驗。早期對我來說，性能並不是最重要的，但對你來說應該是最重要的！

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

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

登入後複製