搜尋

首頁  >  文章  >  web前端  >  初級：React 中的生命週期方法和 Hook

初級：React 中的生命週期方法和 Hook

WBOY
WBOY原創
2024-07-17 22:46:40836瀏覽

Junior level: Lifecycle Methods and Hooks in React

React Hooks 徹底改變了我們在 React 中編寫功能組件的方式，使我們無需編寫類別即可使用狀態和其他 React 功能。本指南將向您介紹基本掛鉤、自訂掛鉤和進階掛鉤模式，以管理複雜狀態並優化效能。

React Hook 簡介

React Hooks 是讓您從功能元件「掛鉤」React 狀態和生命週期功能的函數。 Hooks 是在 React 16.8 中引入的，它們提供了一種更直接的方式在功能元件中使用狀態和其他 React 功能。

Hook 的主要優點

  1. 更簡單的程式碼： Hooks 讓您可以直接在功能元件中使用狀態和生命週期方法，從而使程式碼更簡單、更易讀。
  2. 重複使用邏輯：自訂掛鉤可讓您跨多個元件擷取和重複使用有狀態邏輯。
  3. 增強的功能元件： Hooks 提供了類別元件的所有功能，例如管理狀態和副作用，而無需使用類別。

必備掛鉤

使用狀態

useState 是一個鉤子，可讓您為功能元件新增狀態。

範例：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Counter;

在此範例中，useState 將 count 狀態變數初始化為 0。 setCount 函數在點選按鈕時更新狀態。

使用效果

useEffect 是一個鉤子，可讓您在功能元件中執行副作用，例如獲取資料、直接與 DOM 互動以及設定訂閱。它結合了類別元件中多個生命週期方法的功能（componentDidMount、componentDidUpdate 和 componentWillUnmount）。

範例：

import React, { useState, useEffect } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
: 'Loading...'}
); }; export default DataFetcher;

在此範例中，useEffect 在元件掛載時從 API 取得資料。

使用上下文

useContext 是一個鉤子，可讓您存取給定上下文的上下文值。

範例：

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return <div>The current theme is {theme}</div>;
};

export default ThemedComponent;

在此範例中，useContext 存取 ThemeContext 的目前值。

使用Reducer

useReducer 是一個鉤子，可讓您管理功能元件中的複雜狀態邏輯。它是 useState 的替代方案。

範例：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

在這個範例中，useReducer 使用一個reducer 函數來管理計數狀態。

定制掛鉤

自訂掛鉤讓您可以跨多個元件重複使用有狀態邏輯。自訂鉤子是使用內建鉤子的函數。

範例：

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
};

const DataFetcher = ({ url }) => {
  const data = useFetch(url);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}
: 'Loading...'}
); }; export default DataFetcher;

在此範例中，useFetch 是一個自訂掛鉤，用於從給定 URL 取得資料。

高級鉤子模式

使用 useReducer 管理複雜狀態

當處理涉及多個子值的複雜狀態邏輯或當下一個狀態依賴前一個狀態時，useReducer 可能比 useState 更適合。

範例：

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

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

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default Counter;

在這個範例中，useReducer 使用一個reducer 函數來管理計數狀態。

使用 useMemo 和 useCallback 優化效能

使用備忘錄

useMemo 是一個鉤子，用於記憶計算值，僅當依賴項之一發生更改時才重新計算它。它透過防止每次渲染時進行昂貴的計算來幫助優化效能。

範例：

import React, { useState, useMemo } from 'react';

const ExpensiveCalculation = ({ number }) => {
  const computeFactorial = (n) => {
    console.log('Computing factorial...');
    return n <= 1 ? 1 : n * computeFactorial(n - 1);
  };

  const factorial = useMemo(() => computeFactorial(number), [number]);

  return <div>Factorial of {number} is {factorial}</div>;
};

const App = () => {
  const [number, setNumber] = useState(5);

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
      />
      <ExpensiveCalculation number={number} />
    </div>
  );
};

export default App;

在此範例中，useMemo 確保僅當數字發生變化時才重新計算階乘計算。

使用回調

useCallback 是一個用於記憶函數的鉤子，防止在每次渲染時重新建立函數，除非其依賴項之一發生變更。它對於將穩定的函數傳遞給依賴引用相等的子元件很有用。

範例：

import React, { useState, useCallback } from 'react';

const Button = React.memo(({ onClick, children }) => {
  console.log(`Rendering button - ${children}`);
  return <button onClick={onClick}>{children}</button>;
});

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

  const increment = useCallback(() => setCount((c) => c + 1), []);

  return (
    <div>
      <Button onClick={increment}>Increment</Button>
      <p>Count: {count}</p>
    </div>
  );
};

export default App;

在此範例中，useCallback 確保僅在其依賴項變更時重新建立增量函數，從而防止 Button 元件不必要的重新渲染。

結論

理解並利用 React Hooks 對於現代 React 開發至關重要。 Hooks 讓您能夠在功能元件中編寫更清晰、更易於維護的程式碼。透過掌握 useState、useEffect、useContext 和 useReducer 等基本鉤子，以及自訂鉤子和 useMemo 和 useCallback 性能優化等高級模式，您可以建立健壯且高效的 React 應用程式。作為初級開發人員，熟悉這些概念將顯著增強您開發和維護高品質 React 應用程式的能力。

以上是初級：React 中的生命週期方法和 Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章！

if count for class number function dom this Access
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：帶有 @let 的 Angular 模板局部變量下一篇：帶有 @let 的 Angular 模板局部變量

相關文章

看更多