React 中与生命周期相关的 Hooks 及其使用示例-Toy模板网

这篇具有很好参考价值的文章主要介绍了React 中与生命周期相关的 Hooks 及其使用示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

React 16.8 引入了 Hooks 的概念，使得函数组件也可以使用 state 和生命周期等特性。与生命周期相关的 Hooks 主要有以下三个：

useEffect

useEffect 是最常用的一个 Hook，它可以用来替代 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期函数。useEffect 的作用是在函数组件渲染完成后执行某些操作，例如发送网络请求、操作 DOM 等。

useEffect 接受两个参数：第一个参数是一个回调函数，第二个参数是一个数组，用来指定哪些状态变量发生变化时需要重新执行回调函数。如果不传第二个参数，那么每次渲染都会执行回调函数。

示例代码：

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

在这个示例中，useEffect 函数在组件挂载后和每次 count 状态变化时都会调用，用于更新文档标题。

useLayoutEffect

useLayoutEffect 的作用与 useEffect 类似，但它在所有 DOM 变更之后同步调用回调函数，而不是在浏览器绘制之前调用回调函数。这意味着 useLayoutEffect 可以用来处理需要立即更新 DOM 的情况，例如测量 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>;
}

在这个示例中，useLayoutEffect 函数在组件挂载后立即调用，用于监听窗口大小变化，并在窗口大小变化时更新状态。

useMemo

useMemo 是一个用于优化组件性能的 Hook，它可以用来缓存计算结果，避免在每次渲染时都重新计算。useMemo 接受两个参数：第一个参数是一个函数，用来计算结果，第二个参数是一个数组，用来指定哪些状态变量发生变化时需要重新计算结果。

示例代码：

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