《七》React Hooks 基础_hooks钩子钩如组件状态-优快云博客

本文链接：https://blog.youkuaiyun.com/wsln_123456/article/details/113841203

React Hooks是自React 16.8版本引入的新特性，它允许在函数组件中使用状态和生命周期方法，如useState和useEffect。useState用于在函数组件中添加状态管理，而useEffect则用于处理副作用，模拟类组件的生命周期。通过Hooks，开发者可以在不使用类组件的情况下，实现状态更新和副作用操作，降低了学习和编写成本，提高了代码的可读性和简洁性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相比类组件，函数组件有一些自己的缺陷：

类组件在重新渲染时，只会重新执行 render 函数；函数组件在重新渲染时，整个函数都会被重新执行。

类组件可以定义自己的 State，用来保存组件内部的状态，因为类组件重新渲染只是在重新执行 render 函数，组件内部的数据是不会重新新建的；函数组件不可以，因为函数组件重新渲染是在重新进行函数调用，每次都会产生新的临时变量。

import React from 'react'

function FuncComponent() {
  let message = 'Hello JS'

  const handleMessageChange = () => {
    // 修改 message 之后，函数组件无法知道自己是需要重新渲染的
    message = 'Hello React'
  }

  return (
    <h1 onClick={handleMessageChange}>{message}</h1>
  )
}

export default FuncComponent

类组件有自己的生命周期，可以在对应的生命周期中完成需要的逻辑；函数组件没有生命周期。

Hooks 的出现，可以解决上面提到的问题。Hooks 是 React V16.8 新增的特性。Hooks 的意思是钩子，本质上其实就是 JavaScript 函数，由于函数组件本身是没有 State、生命周期等特性的，Hooks 可以在另外一个地方保存好这些东西，在函数组件需要的时候把这些特性钩进来，就可以让开发者在函数组件中使用 State 以及生命周期等其他 React 的特性。

React 默认提供了一些常用的钩子，也可以封装自己的钩子。钩子一律使用 use 前缀命名，便于识别。

其实 Hooks 就是把类组件中的优势吸收到了函数组件中，对函数组件进行了增强；同时还保持了函数组件的简洁性。

Hooks 的使用规则：

Hooks 只能在 React 的函数组件或者自定义 Hook 中使用，不能在类组件或者其他普通的 JS 函数中使用。

Hooks 只能在顶层调用，不能在循环、条件判断或者子函数等中调用。

import React, {useState} from 'react'

function Count() {
  // 正确
  const [count, setCount] = useState(0)

  // 错误
  if (true) {
    const [count, setCount] = useState(0)
  }

  return ( <h1>{count}</h1>)
}

export default Count