React 16.8 引入了 Hooks 的概念，使得函數(shù)組件也可以使用 state 和生命周期等特性。與生命周期相關(guān)的 Hooks 主要有以下三個(gè)：

1. useEffect

useEffect 是最常用的一個(gè) Hook，它可以用來替代 class 組件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 這三個(gè)生命周期函數(shù)。useEffect 的作用是在函數(shù)組件渲染完成后執(zhí)行某些操作，例如發(fā)送網(wǎng)絡(luò)請(qǐng)求、操作 DOM 等。

useEffect 接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，第二個(gè)參數(shù)是一個(gè)數(shù)組，用來指定哪些狀態(tài)變量發(fā)生變化時(shí)需要重新執(zhí)行回調(diào)函數(shù)。如果不傳第二個(gè)參數(shù)，那么每次渲染都會(huì)執(zhí)行回調(diào)函數(shù)。

示例代碼：

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

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

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

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

在這個(gè)示例中，useEffect 函數(shù)在組件掛載后和每次 count 狀態(tài)變化時(shí)都會(huì)調(diào)用，用于更新文檔標(biāo)題。

1. useLayoutEffect

useLayoutEffect 的作用與 useEffect 類似，但它在所有 DOM 變更之后同步調(diào)用回調(diào)函數(shù)，而不是在瀏覽器繪制之前調(diào)用回調(diào)函數(shù)。這意味著 useLayoutEffect 可以用來處理需要立即更新 DOM 的情況，例如測(cè)量 DOM 元素的大小和位置。

示例代碼：

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

function Example() {
  const [width, setWidth] = useState(window.innerWidth);

  useLayoutEffect(() => {
    function updateWidth() {
      setWidth(window.innerWidth);
    }
    window.addEventListener('resize', updateWidth);
    return () => {
      window.removeEventListener('resize', updateWidth);
    };
  }, []);

  return <p>Window width: {width}</p>;
}

在這個(gè)示例中，useLayoutEffect 函數(shù)在組件掛載后立即調(diào)用，用于監(jiān)聽窗口大小變化，并在窗口大小變化時(shí)更新狀態(tài)。

1. useMemo

useMemo 是一個(gè)用于優(yōu)化組件性能的 Hook，它可以用來緩存計(jì)算結(jié)果，避免在每次渲染時(shí)都重新計(jì)算。useMemo 接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是一個(gè)函數(shù)，用來計(jì)算結(jié)果，第二個(gè)參數(shù)是一個(gè)數(shù)組，用來指定哪些狀態(tài)變量發(fā)生變化時(shí)需要重新計(jì)算結(jié)果。

示例代碼：

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

function Example() {
  const [count, setCount] = useState(0);
  const [factor, setFactor] = useState(1);

  const result = useMemo(() => {
    return count * factor;
  }, [count, factor]);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Factor: {factor}</p>
      <p>Result: {result}</p>
      <button onClick={() => setCount(count + 1)}>Add count</button>
      <button onClick={() => setFactor(factor + 1)}>Add factor</button>
    </div>
  );
}

在這個(gè)示例中，useMemo 函數(shù)用于緩存 count 和 factor 的乘積，避免在每次渲染時(shí)都重新計(jì)算。只有當(dāng) count 或 factor 發(fā)生變化時(shí)，才會(huì)重新計(jì)算結(jié)果。

總之，這些與生命周期相關(guān)的 Hooks 為函數(shù)組件提供了更加靈活和高效的方式來處理狀態(tài)和生命周期事件。文章來源地址http://www.zghlxwxcb.cn/news/detail-850528.html

到了這里，關(guān)于React 中與生命周期相關(guān)的 Hooks 及其使用示例的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！