当前位置: 首页 > news >正文

一文讲清楚React Hooks

文章目录

  • 一文讲清楚React Hooks
    • 一、什么是 React Hooks?
    • 二、常用基础 Hooks
      • 2.1 useState:状态管理
        • 基本用法
        • 特点
      • 2.2 useEffect:副作用处理
        • 基本用法
        • 依赖数组说明
      • 2.3 useContext:上下文共享
        • 基本用法
        • 特点
    • 三、其他常用 Hooks
      • 3.1 useReducer:复杂状态管理
      • 3.2 useCallback:记忆化回调函数
      • 3.3 useMemo:记忆化计算结果
      • 3.4 useRef:获取DOM元素与存储可变值
    • 四、其他实用 Hooks
    • 五、Hooks 使用规则

一文讲清楚React Hooks

一、什么是 React Hooks?

React Hooks 是 React 16.8 版本引入的新特性,它允许开发者在不编写类组件的情况下使用状态(state)和其他 React 特性(如生命周期、上下文等)。Hooks 的出现解决了类组件中存在的代码复用困难、逻辑分散、生命周期函数臃肿等问题,让函数组件拥有了与类组件同等的能力。

二、常用基础 Hooks

2.1 useState:状态管理

`useState` 是最基础的 Hook,用于在函数组件中添加状态管理。

基本用法
import { useState } from 'react';function Counter() {// 声明一个名为count的状态变量,初始值为0// setCount是更新count的函数const [count, setCount] = useState(0);return (<div><p>你点击了 {count}</p><button onClick={() => setCount(count + 1)}>点击我</button></div>);
}
特点
  • 返回值:返回一个数组,第一个元素是当前状态值,第二个元素是更新状态的函数
  • 状态更新
    • 调用更新函数会重新渲染组件
    • 状态更新是异步的,多次连续更新会被合并
    • 如果新状态依赖于旧状态,应使用函数形式:`setCount(prevCount => prevCount + 1)`
  • 初始化:初始值只在组件首次渲染时生效

2.2 useEffect:副作用处理

`useEffect` 用于处理组件中的副作用操作,如数据获取、订阅、DOM 操作等,相当于类组件中的 `componentDidMount`、`componentDidUpdate` 和 `componentWillUnmount` 的组合。

基本用法
import { useState, useEffect } from 'react';function UserProfile({ userId }) {const [user, setUser] = useState(null);// 副作用函数useEffect(() => {// 获取用户数据(副作用操作)const fetchUser = async () => {const response = await fetch(\`/api/users/\${userId}\`);const data = await response.json();setUser(data);};fetchUser();// 清理函数(可选)return () => {// 组件卸载或userId变化时执行,用于取消订阅、清除定时器等console.log('清理操作');};}, [userId]); // 依赖数组:只有userId变化时,才会重新执行副作用if (!user) return <div>Loading...</div>;return <div>{user.name}</div>;
}
依赖数组说明
  • 空数组 `[]`:副作用只在组件挂载时执行一次,清理函数在组件卸载时执行(类似 `componentDidMount` 和 `componentWillUnmount`)
  • 包含特定值 `[value1, value2]`:组件挂载时执行,且当数组中的值发生变化时重新执行(类似 `componentDidUpdate`)
  • 不提供依赖数组:每次组件渲染都会执行副作用

2.3 useContext:上下文共享

`useContext` 用于在函数组件中获取上下文(Context)的值,避免了通过 props 层层传递数据的麻烦。

基本用法
import { createContext, useContext } from 'react';// 1. 创建上下文
const ThemeContext = createContext('light');// 2. 提供上下文值
function App() {return (<ThemeContext.Provider value="dark"><ThemedComponent /></ThemeContext.Provider>);
}// 3. 消费上下文值
function ThemedComponent() {// 使用useContext获取上下文值const theme = useContext(ThemeContext);return <div>当前主题:{theme}</div>;
}
特点
  • 当 `ThemeContext.Provider` 的 `value` 发生变化时,所有使用 `useContext(ThemeContext)` 的组件都会重新渲染
  • `useContext` 接收一个上下文对象(由 `createContext` 创建),并返回该上下文的当前值

三、其他常用 Hooks

3.1 useReducer:复杂状态管理

`useReducer` 是 `useState` 的替代方案,适用于处理复杂状态逻辑或多个子值组成的状态对象。

import { useReducer } from 'react';// 1. 定义reducer函数:接收当前状态和动作,返回新状态
function todoReducer(state, action) {switch (action.type) {case 'ADD_TODO':return [...state, { id: Date.now(), text: action.text, done: false }];case 'TOGGLE_TODO':return state.map(todo =>todo.id === action.id ? { ...todo, done: !todo.done } : todo);default:return state;}
}function TodoList() {// 2. 使用useReducer:接收reducer和初始状态,返回当前状态和dispatch函数const [todos, dispatch] = useReducer(todoReducer, []);return (<div><button onClick={() => dispatch({ type: 'ADD_TODO', text: '新任务' })}>添加任务</button><ul>{todos.map(todo => (<likey={todo.id}style={{ textDecoration: todo.done ? 'line-through' : 'none' }}onClick={() => dispatch({ type: 'TOGGLE_TODO', id: todo.id })}>{todo.text}</li>))}</ul></div>);
}

3.2 useCallback:记忆化回调函数

`useCallback` 用于记忆化回调函数,避免在每次渲染时创建新的函数实例,从而优化子组件的性能(配合 `React.memo` 使用)。

import { useCallback, useState } from 'react';function Parent() {const [count, setCount] = useState(0);// 记忆化回调函数:只有当依赖项变化时,才会创建新的函数const handleClick = useCallback(() => {console.log('点击事件');}, []); // 空依赖数组:函数只会被创建一次return (<div><Child onClick={handleClick} /><button onClick={() => setCount(count + 1)}>计数:{count}</button></div>);
}// 使用React.memo优化子组件,避免不必要的重渲染
const Child = React.memo(({ onClick }) => {console.log('Child 渲染');return <button onClick={onClick}>点击我</button>;
});

3.3 useMemo:记忆化计算结果

`useMemo` 用于记忆化计算结果,避免在每次渲染时重复执行昂贵的计算。

import { useMemo, useState } from 'react';function ExpensiveCalculation({ numbers }) {// 记忆化计算结果:只有当numbers变化时,才会重新计算const sum = useMemo(() => {console.log('执行计算');return numbers.reduce((acc, num) => acc + num, 0);}, [numbers]); // 依赖数组return <div>总和:{sum}</div>;
}function App() {const [count, setCount] = useState(0);const [numbers] = useState([1, 2, 3, 4, 5]);return (<div><ExpensiveCalculation numbers={numbers} /><button onClick={() => setCount(count + 1)}>计数:{count}</button></div>);
}

3.4 useRef:获取DOM元素与存储可变值

`useRef` 主要有两个用途:获取DOM元素引用和存储不需要引起重渲染的可变值。

import { useRef, useState, useEffect } from 'react';function TextInputWithFocusButton() {// 1. 获取DOM元素引用const inputEl = useRef(null);// 2. 存储可变值(不会引起重渲染)const renderCount = useRef(0);const [text, setText] = useState('');useEffect(() => {renderCount.current += 1; // 修改ref的值不会触发重渲染});const focusInput = () => {// 通过current属性访问DOM元素inputEl.current.focus();};return (<div><inputref={inputEl}value={text}onChange={(e) => setText(e.target.value)}/><button onClick={focusInput}>聚焦输入框</button><p>渲染次数:{renderCount.current}</p></div>);
}

四、其他实用 Hooks

Hook用途说明
`useImperativeHandle`自定义暴露给父组件的实例值,配合 `forwardRef` 使用
`useLayoutEffect`与 `useEffect` 类似,但会在DOM更新后同步执行,可能阻塞浏览器绘制
`useDebugValue`在React DevTools中为自定义Hook添加标签,便于调试

五、Hooks 使用规则

为了确保 React 能够正确识别和管理 Hooks,必须遵守以下规则:

  1. 只能在函数组件或自定义 Hook 的顶层调用 Hooks
    • 不能在条件语句、循环、嵌套函数中调用 Hooks
    • 错误示例:
     function MyComponent() {if (condition) {const [count, setCount] = useState(0); // ❌ 不能在条件中调用}// ...}```
http://www.dtcms.com/a/273150.html

相关文章:

  • 解决问题的“测地线”:关于第一性原理与其他系统思考框架
  • RocksDB 与 ZenFS:原理、特性及在科研与工程中的应用初步探索
  • 使用Arthas监听Spring代理对象
  • 从UI设计到数字孪生实战部署:构建智慧教育的在线学习分析平台
  • Java观察者模式实现方式与测试方法
  • Constants
  • SSM 框架整合教程:从环境搭建到 CRUD 实现
  • html页面,一个控件,可以粘贴图片和样式,一直按enter键会将下面内容推下去
  • OrCAD 24.1补丁005中文界面切换指南
  • QT Android 如何打包大文件到目录下?
  • 【Pandas】pandas DataFrame from_records
  • Android开发中几种scope的对比
  • ClickHouse JSON 解析
  • Kubernetes Dashboard UI 部署安装
  • stm32计时的两个方法
  • HarmonyOS学习记录4
  • 基于U-net的高阶心音信号去噪系统设计与实现
  • SSE方式调用php,不是直接 post,
  • 【C++基础语法】
  • STM32F103之ModBus\RS232\RS422\RS485
  • 瑞幸X多邻国“疯感”营销:以情感共鸣取代硬广触达
  • Qt开发:QtConcurrent介绍和使用
  • Python正则表达式实战指南
  • 深度学习13(经典卷积网络结构+卷积网络结构优化)
  • J1939协议
  • 个体户核定多地暂停,将不再享受核定征收?
  • 人工智能-基础篇-29-什么是低代码平台?
  • 大数据学习6:Sqoop数据迁移工具
  • ArcGIS 打开 nc 降雨量文件
  • MinerU2将PDF转成md文件,并分拣图片