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

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

在 React 類組件 中，您可以重寫多種生命周期方法以在組件生命周期中的特定時(shí)間運(yùn)行代碼：

安裝階段（初始化組件）

• 構(gòu)造函數(shù)()

  • 在組件掛載之前調(diào)用。
  • 對于初始化狀態(tài)或綁定事件處理程序很有用。

• static getDerivedStateFromProps(props, state)

  • 在渲染之前調(diào)用，無論是在初始安裝還是后續(xù)更新時(shí)。
  • 允許根據(jù) props 更新狀態(tài)。

• 渲染()

  • 類組件中唯一必需的方法。
  • 應(yīng)該返回 React 元素，這些元素將被渲染到 DOM。

• componentDidMount()

  • 組件安裝后立即調(diào)用。
  • 通常用于獲取數(shù)據(jù)、設(shè)置訂閱或進(jìn)行 API 調(diào)用。

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

• static getDerivedStateFromProps(props, state)

  • （也在更新期間調(diào)用）用于根據(jù) props 更新狀態(tài)。

• shouldComponentUpdate(nextProps, nextState)

  • 確定是否需要重新渲染。
  • 可用于通過防止不必要的渲染來優(yōu)化性能。

• 渲染()

  • （更新期間再次調(diào)用）

• getSnapshotBeforeUpdate(prevProps, prevState)

  • 在虛擬 DOM 的更改應(yīng)用于實(shí)際 DOM 之前調(diào)用。
  • 對于在更新之前捕獲信息（如滾動(dòng)位置）很有用。

• componentDidUpdate(prevProps, prevState, snapshot)

  • 更新發(fā)生后立即調(diào)用。
  • 對于在組件更新后執(zhí)行操作很有用（例如，根據(jù) prop 更改進(jìn)行 API 調(diào)用）。

卸載階段（移除組件之前進(jìn)行清理）

• componentWillUnmount()
  • 在組件卸載和銷毀之前調(diào)用。
  • 對于清理訂閱、計(jì)時(shí)器或事件偵聽器很有用。

錯(cuò)誤處理

• componentDidCatch（錯(cuò)誤，信息）
  • 如果在渲染期間、生命周期方法或任何子組件的構(gòu)造函數(shù)中出現(xiàn)錯(cuò)誤，則調(diào)用。
  • 對于記錄錯(cuò)誤和顯示后備 UI 很有用。

2. React Hooks（函數(shù)組件）

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

基本掛鉤

• useState(初始狀態(tài))
  • 允許您向功能組件添加狀態(tài)。
  • 返回一個(gè)狀態(tài)變量和一個(gè)更新它的函數(shù)。

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

• useEffect（回調(diào)，依賴項(xiàng)）
  • 類似于 componentDidMount、componentDidUpdate 和 componentWillUnmount 的組合。
  • 用于副作用，如數(shù)據(jù)獲取、訂閱或手動(dòng)更改 DOM。

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

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

  const value = useContext(MyContext);

額外的鉤子

• useReducer（reducer，initialState）
  • useState 的替代方案，用于管理更復(fù)雜的狀態(tài)邏輯。

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

• useCallback（回調(diào)，依賴項(xiàng)）
  • 返回回調(diào)函數(shù)的記憶版本，對于優(yōu)化依賴引用相等的子組件很有用。

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

• useMemo（創(chuàng)建，依賴項(xiàng)）
  • 返回一個(gè)記憶值，用于優(yōu)化昂貴的計(jì)算。

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

• useRef(初始值)
  • 返回一個(gè)可變的引用對象，該對象在渲染之間持續(xù)存在。
  • 對于訪問 DOM 元素或存儲可變值很有用。

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, 依賴項(xiàng))
  • 自定義在使用 ref 和forwardRef 時(shí)暴露的實(shí)例值。

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

• useLayoutEffect（回調(diào)，依賴項(xiàng)）

  • 與 useEffect 類似，但在所有 DOM 突變后同步觸發(fā)。
  • 對于從 DOM 讀取布局并同步重新渲染很有用。

• useDebugValue(值)

  • 可用于在 React DevTools 中顯示自定義掛鉤的標(biāo)簽。

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

3. 事件處理方法

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

• onClick
• onChange
• 提交
• 焦點(diǎn)
• onBlur
• onKeyPress

示例：

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

4. 其他 React 方法

這些是您可能會(huì)發(fā)現(xiàn)有用的其他方法：

• React.createRef()

  • 用于在類組件中創(chuàng)建引用。

• React.forwardRef()

  • 將引用傳遞給子組件。

• React.memo(組件)

  • 一個(gè)高階組件，如果 props 沒有改變，它會(huì)阻止重新渲染。

• React.lazy()

  • 用于代碼分割和延遲加載組件。

• 反應(yīng).懸念

  • 與 React.lazy() 結(jié)合使用，在加載惰性組件時(shí)顯示回退。

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

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

示例：

  const value = useContext(MyContext);

6. 道具類型和默認(rèn)道具

• propTypes

  • 用于驗(yàn)證傳遞給組件的 props 類型。

• defaultProps

  • 用于設(shè)置 props 的默認(rèn)值。

示例：

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

結(jié)論

• 類組件更傳統(tǒng)，使用生命周期方法。
• 功能組件利用鉤子，并且由于其簡單性和性能優(yōu)勢而在現(xiàn)代React開發(fā)中通常是首選。

當(dāng)您需要對組件生命周期進(jìn)行細(xì)粒度控制時(shí)，請使用類組件；當(dāng)您想要更簡單、更清晰的 API 時(shí)，請使用鉤子。

以上是React的主要概念||反應(yīng)的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！