React的主要概念||反應

在 React.js 中，有多種方法可用於管理元件、處理生命週期事件和使用鉤子。下面，我將最重要的方法分成不同的部分：

1. 組件生命週期方法（類別組件）

在 React 類別元件 中，您可以重寫多種生命週期方法以在元件生命週期中的特定時間運行程式碼：

安裝階段（初始化組件）

• 建構子()

  • 在元件掛載之前呼叫。
  • 對於初始化狀態或綁定事件處理程序很有用。

• static getDerivedStateFromProps(props, state)

  • 在渲染之前調用，無論是在初始安裝還是後續更新時。
  • 允許根據 props 更新狀態。

• 渲染()

  • 類別組件中唯一必需的方法。
  • 應該會傳回 React 元素，這些元素將會被渲染到 DOM。

• componentDidMount()

  • 元件安裝後立即呼叫。
  • 通常用於取得資料、設定訂閱或進行 API 呼叫。

更新階段（由於 props 或 state 的變化而重新渲染）

• static getDerivedStateFromProps(props, state)

  • （也在更新期間呼叫）用於根據 props 更新狀態。

• shouldComponentUpdate(nextProps, nextState)

  • 確定是否需要重新渲染。
  • 可用於透過防止不必要的渲染來最佳化效能。

• 渲染()

  • （更新期間再次呼叫）

• getSnapshotBeforeUpdate(prevProps, prevState)

  • 在虛擬 DOM 的變更應用於實際 DOM 之前呼叫。
  • 對於在更新之前捕獲資訊（如滾動位置）很有用。

• componentDidUpdate(prevProps, prevState, snapshot)

  • 更新發生後立即呼叫。
  • 對於在元件更新後執行操作很有用（例如，根據 prop 變更進行 API 呼叫）。

卸載階段（移除組件之前進行清理）

• componentWillUnmount()
  • 在元件卸載和銷毀之前呼叫。
  • 對於清理訂閱、計時器或事件偵聽器很有用。

錯誤處理

• componentDidCatch（錯誤，訊息）
  • 如果在渲染期間、生命週期方法或任何子元件的建構函式中出現錯誤，則呼叫。
  • 對於記錄錯誤和顯示後備 UI 很有用。

2. React Hooks（函數組件）

Hooks 是 React 16.8 中的新增功能，讓您無需編寫類別即可使用狀態和其他 React 功能。

基本掛鉤

• useState(初始狀態)
  • 允許您為功能組件新增狀態。
  • 傳回一個狀態變數和一個更新它的函數。

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

• useEffect（回調，依賴項）
  • 類似 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。
  • 用於副作用，如數據獲取、訂閱或手動更改 DOM。

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(上下文)
  • 允許您訂閱 React 上下文，而無需嵌套 Consumer 元件。

  const value = useContext(MyContext);

額外的鉤子

• useReducer（reducer，initialState）
  • useState 的替代方案，用於管理更複雜的狀態邏輯。

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback（回調，依賴項）
  • 傳回回調函數的記憶版本，對於最佳化依賴引用相等的子元件很有用。

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo（創建，依賴項）
  • 傳回一個記憶值，用於最佳化昂貴的計算。

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(初始值)
  • 傳回一個可變的引用對象，該對像在渲染之間持續存在。
  • 對於存取 DOM 元素或儲存可變值很有用。

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, 依賴項)
  • 自訂使用 ref 和forwardRef 時所暴露的實例值。

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect（回調，相依性）

  • 與 useEffect 類似，但在所有 DOM 突變後同步觸發。
  • 對於從 DOM 讀取佈局並同步重新渲染很有用。

• useDebugValue(值)

  • 可用於在 React DevTools 中顯示自訂掛鉤的標籤。

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

3. 事件處理方法

React 提供了處理事件的方法，與常規 DOM 事件處理類似，但有一些區別：

• onClick
• onChange
• 提交
• 焦點
• onBlur
• onKeyPress

範例：

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. 其他 React 方法

這些是您可能會發現有用的其他方法：

• React.createRef()

  • 用於在類別組件中建立引用。

• React.forwardRef()

  • 將引用傳遞給子元件。

• React.memo(組件)

  • 一個高階元件，如果 props 沒有改變，它會阻止重新渲染。

• React.lazy()

  • 用於程式碼分割和延遲載入元件。

• 反應.懸念

  • 與 React.lazy() 結合使用，在載入惰性元件時顯示回退。

5. React Router 方法（用於路由）

• useNavigate()（React Router v6）
• useParams()
• useLocation()
• useMatch()

範例：

  const value = useContext(MyContext);

6. 道具類型與預設道具

• propTypes

  • 用於驗證傳遞給元件的 props 類型。

• defaultProps

  • 用於設定 props 的預設值。

範例：

  const [state, dispatch] = useReducer(reducer, initialState);

結論

• 類別組件較傳統，使用生命週期方法。
• 功能元件利用鉤子，並且由於其簡單性和性能優勢而在現代React開發中通常是首選。

當您需要對元件生命週期進行細微控制時，請使用類別元件；當您想要更簡單、更清晰的 API 時，請使用鉤子。

以上是React的主要概念||反應的詳細內容。更多資訊請關注PHP中文網其他相關文章！