我最近回顧 React 文件的要點

此部落格最初發佈於 Medium

嘿，React 愛好者們！我最近深入研究了 React 文檔，並想與您分享我的經驗。對於那些希望在 React 中打下堅實基礎的人來說，這是一份簡潔的指南。讓我們透過簡單的解釋和程式碼片段來分解核心概念。

這將是一個有點長的故事，但請堅持一下，一次掌握 React 的所有核心概念。您會發現回顧和重新審視這些概念對於進一步進步是有益的。

目錄

• 用 React 思考
• 組件和 JSX
• 道具
• 條件渲染
• 渲染清單
• 純成分
• 使用者介面樹
• 互動與事件處理程序
• 狀態
• 受控組件
• 不受控制的組件
• 參考文獻
• 防止預設行為
• 事件傳播
• 管理複雜狀態
• 上下文
• 副作用
• useEffect 的最佳實踐
• React 規則
• 自訂掛鉤
• Hook 規則

在 React 中思考

React 就是將你的 UI 分解為可重複使用的元件。建立 React 應用程式時，請從以下位置開始：

1. 將 UI 分解為元件層次結構
2. 建構沒有互動性的靜態版本
3. 辨識 UI 狀態的最小表示
4. 確定您的州應該居住在哪裡
5. 新增逆向資料流

參考：https://react.dev/learn/thinking-in-react

組件和 JSX

元件是 React 應用程式的建構塊。它們可以是函數式的，也可以是基於類別的（老式的，不建議）。 JSX 是一種語法擴展，可讓您在 JavaScript 中編寫類似 HTML 的程式碼。

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

參考資料：

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

道具

Props 是我們將資料從父元件傳遞到子元件的方式。它們是唯讀的，有助於保持我們的組件純淨。

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

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

參考：https://react.dev/learn/passing-props-to-a-component

條件渲染

React 可讓您根據特定條件有條件地渲染元件或元素。

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

參考：https://react.dev/learn/conditional-rendering

渲染列表

使用map()函數在React中渲染元素清單。不要忘記為每個項目添加一個唯一的關鍵道具。

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

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

參考：https://react.dev/learn/rendering-lists

純成分

純元件總是為相同的 props 和狀態渲染相同的輸出。它們是可預測的並且更容易測試。

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

參考：https://react.dev/learn/keeping-components-pure

使用者介面樹

React 建置並維護 UI 的內部表示，稱為虛擬 DOM。這使得 React 能夠有效率地僅更新實際 DOM 中已更改的部分。

參考：https://react.dev/learn/understanding-your-ui-as-a-tree

互動和事件處理程序

React 使用合成事件來在不同瀏覽器中一致地處理使用者互動。

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

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

參考：https://react.dev/learn/responding-to-events

狀態

狀態用於組件中隨時間變化的資料。使用 useState 鉤子向功能組件新增狀態。

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

參考：https://react.dev/learn/state-a-components-memory

受控組件

受控元件的狀態由 React 控制。

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

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

不受控制的組件

不受控制的元件直接在 DOM 上管理其狀態。

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

參考文獻

Refs 提供了一種存取 DOM 節點或在 render 方法中建立的 React 元素的方法。

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

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

防止預設行為

使用 PreventDefault() 停止某些事件的預設瀏覽器行為。

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>
  );
}

事件傳播

React 事件的傳播方式與原生 DOM 事件類似。您可以使用 stopPropagation() 來防止事件冒泡。

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

管理複雜狀態

考慮使用 useReducer 鉤子或 Redux 或 Zustand 等狀態管理函式庫來實現複雜的狀態邏輯。

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

情境

Context 提供了一種透過元件樹傳遞資料的方法，而無需在每個層級手動向下傳遞 props。

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>
    </>
  );
}

參考：https://react.dev/learn/passing-data-deeply-with-context

副作用

副作用是影響正在執行的函數範圍之外的操作，例如資料擷取或 DOM 操作。使用 useEffect 鉤子來管理副作用。

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

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

useEffect的最佳實踐

1. 始終在依賴數組中包含效果所依賴的所有變數。
2. 仔細考慮效果的依賴性，避免無限循環。
3. 清理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>;
}

參考資料：

• 你可能不需要 useEffect：https://react.dev/learn/you-might-not-need-an-effect
• 與效果同步：https://react.dev/learn/synchronizing-with-effects
• 反應式效果的生命週期：https://react.dev/learn/lifecycle-of-reactive-effects

反應規則

1. 元件名稱總是以大寫字母開頭。
2. 關閉所有標籤，包括自關閉標籤。
3. 不要直接修改 props。
4. 盡可能保持組件純淨。

參考：https://react.dev/reference/rules

定制掛鉤

自訂掛鉤可讓您將元件邏輯提取到可重複使用的函數中。

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

鉤子規則

1. 僅在元件的頂層呼叫鉤子。
2. 僅從 React 函數元件或自訂鉤子呼叫鉤子。
3. 使用 eslint-plugin-react-hooks 來強制執行這些規則。

參考：https://react.dev/reference/rules/rules-of-hooks

我們的 React 之旅就這樣結束了！請記住，最好的學習方法是實踐。開始建立項目，嘗試這些概念，當您需要更多詳細資訊時，不要害怕深入研究 React 文件。快樂編碼！

以上是我最近回顧 React 文件的要點的詳細內容。更多資訊請關注PHP中文網其他相關文章！