hooks知识点积累

最新推荐文章于 2025-11-15 15:48:04 发布

原创最新推荐文章于 2025-11-15 15:48:04 发布 · 403 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #前端 #学习

React v16.8 引入了Hooks，它允许函数组件使用状态和其他React功能。Hooks提供了渐进式策略，推荐用于新功能，而不是大规模重构。useState是常用的Hook，用于组件的状态管理。它返回一个状态变量和一个更新状态的函数，使函数组件能处理状态变化。

hooks 解释=>钩子,钩住,钓钩,是React v16.8 新增的功能

hooks 作用=>

①为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能

②可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

③注意：Hooks 只能在函数组件中使用

React v16.8 版本前后，组件开发模式的对比：

React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)
React v16.8 及其以后：
1. class 组件(提供状态) + 函数组件(展示内容)
2. Hooks(提供状态) + 函数组件(展示内容)
3. 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件

hooks-渐进策略

什么是hooks渐进式策略

①不推荐直接使用 Hooks 大规模重构现有组件

②推荐：新功能用 Hooks，复杂功能实现不了的，也可以继续用class

③找一个功能简单、非核心功能的组件开始使用hooks

useState-基本使用

useState作用=>为组件提供状态,是一个 hook，就是一个特殊的函数，让你在函数组件中获取状态等 React 特性;名称上看 hook 都以use开头的

语法


const stateArray = useState(0);
// 索引 0 表示：状态值（state）
const state = stateArray[0];
// 索引 1 表示：修改状态的函数（setState）
const setState = stateArray[1];

使用的步骤

导入 useState hook
调用 useState 函数，传入初始值
从 useState 函数的返回值中，得到状态和修改状态的函数
在 JSX 中展示状态
在按钮的点击事件中调用修改状态的函数，来更新状态

import { useState } from 'react';

const Count = () => {
  // 解构：
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>计数器：{state}</h1>
      <button onClick={() => setState(state + 1)}>+1</button>
    </div>
  );
};