React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount

最新推荐文章于 2025-09-22 13:27:19 发布

转载最新推荐文章于 2025-09-22 13:27:19 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/cuandeqin2083/article/details/97799896

文章标签：

#Hook #React #State

Vue/React/Angular 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了React Hooks的基础概念，包括useState和useEffect的使用方法。通过对比类组件，阐述了Hooks如何简化状态管理和副作用处理，提高了代码的可读性和可维护性。

介绍

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

缘由

Hook的初衷是为了解决原本无状态组建需要使用state, 必须改造为class这个痛点。
useState

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

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

这个是官方提供的最简单的例子，不难理解, 按钮每次点击都会调用一次setCount, 从而改变count的值和以下的例子等价。

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

我用注释来解释可能更好理解useState每个参数的意义，稍微改造一下第一个例子。

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [
	  count, 　// 在state里面的名字
	  setCount  // 改变这个名字的函数
  ] = useState(
  	0  // 初值count的初值
  );

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => 
      setCount(
      count + 1  //  准备把count该成什么样子
      )}>
        Click me
      </button>
    </div>
  );
}

在以前class的形式, 所有的可变数据都放在一个state内部进行维护, 这样这个state会越来越大…越来越臃肿…越来越难以维护…如果没有注释可能就难以理解…这样就诞生了Redux。
我本人认为, useState 可以直接解决这样的一个痛点, 下面是我在新项目中使用hook的例子。

// 表格loading
  const [loading, setLoading] = useState(true);

  // 表格数据
  const [listData, setListData] = useState({ list: [], total: 0 });

  // 当前页码
  const [current, setCurrent] = useState(0);

  // 搜索数据
  const [searchData, setSearchData] = useState({});

  // 医生职称
  const [jobTitle, setJobTitle] = useState([]);

  // 科室
  const [dept, setDept] = useState([]);

  // 弹窗显隐
  const [visible, setVisible] = useState(false);

  // 弹窗数据
  const [showData, setShowData] = useState({});

可以很直观的看到基本上一个数据享受一个useState…配合正确的注释, 调用正确的方法, 使代码可读性大大增强。
useEffect

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

这句话来自官网的原画，接下来我就为大家解释useEffect。

useEffect 会在每次渲染后都执行吗？是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。

这个是官网的原话, 不难理解,这样就可以模拟出 componentDidUpdate…你可以在hook里面写你想要逻辑，直接上官网代码。

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

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

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

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

可以看到每次点击按钮, 都重新set了Count的值, 因为每次更新都会走到useEffect(后面会说到怎么样不每次都进入useEffect )，他是useEffect的逻辑是,每次都修改document.title。

这样就模拟了componentDidUpdate componentDidMount componentWillUnmount useEffect其实有两个参数, 第一个是调用函数, 第二个是监听值。

useEffect(
  () => { // 我叫A函数
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

这段代码可以理解为, 程序一运行, 就调用了一次A函数，之后每次渲染虽然都会走到这个useEffect，因为他有第二个参数，所以只有在 [props.source] 变化的时候，才会再次调用A函数。

我们可以灵活的调用起来, 这个值可以来自useState控制.你想他变化的时候,你就用useState改变一下他的值。

那我怎么样才可以优雅的让这个useEffect只调用一次，像componentDidMount呢?可以这样在第二个值传一个控制值。

useEffect(() => {
    const firstGet = async () => {
      const [z, x, c] = await Promise.all([
        requestZ(),
        requestX(),
        requestZ(),
      ]);
      // 做你想做的事情
    };
    firstGet();
  }, []);

类推，那怎么样才可以模仿componentWillUnmount呢?

useEffect(() => {
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  }, []);