深入理解React钩子：常用与高级用法全解析

已于 2024-04-18 17:53:47 修改
阅读量2.2k 收藏 10
点赞数 2
文章标签： react
于 2023-08-31 10:49:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsz1805355272/article/details/132597264
版权

React 钩子

一、常用的 React 钩子：

1. useState

用于在函数式组件中添加状态管理。它返回一个状态值和一个更新状态的函数，让你可以在组件中追踪和更新状态。

2. useEffect

用于在组件渲染完成后执行副作用操作，比如数据获取、订阅等。它接收一个回调函数和一个依赖数组，可以用来管理副作用的触发时机。

3. useContext

用于在组件中访问全局的上下文数据。它接收一个上下文对象，返回上下文中的数据。

4. useReducer

类似于 useState，但更适用于复杂的状态逻辑，它通过使用一个 reducer 函数来管理状态。

5. useCallback

用于缓存回调函数，以避免在每次渲染时创建新的回调函数。适用于性能优化。

6. useMemo

用于缓存计算结果，以避免在每次渲染时重复计算。适用于性能优化。

7. useState

用于在函数式组件中添加状态管理。它返回一个状态值和一个更新状态的函数，让你可以在组件中追踪和更新状态。

8. useContext

用于在组件中访问全局的上下文数据。它接收一个上下文对象，返回上下文中的数据。

9. useReducer

类似于 useState，但更适用于复杂的状态逻辑，它通过使用一个 reducer 函数来管理状态。

10. useCallback

用于缓存回调函数，以避免在每次渲染时创建新的回调函数。适用于性能优化。

11. useMemo

用于缓存计算结果，以避免在每次渲染时重复计算。适用于性能优化。

二、不常用的 React 钩子：

  1. useImperativeHandle：用于自定义暴露给父组件的实例值，通常与 forwardRef 一起使用。
  2. useLayoutEffect：与 useEffect 类似，但在 DOM 更新之后同步执行，适用于需要操作 DOM 布局的情况。
  3. useDebugValue：用于在 React 开发者工具中提供自定义钩子的标签和调试信息。
  4. useRef：用于在组件渲染之间保持变量的稳定引用，不触发重新渲染。还可以用于获取 DOM 元素的引用。
  5. useTransition：用于管理异步更新的状态，可以平滑地在不同状态之间切换。
  6. useMutableSource：用于自定义数据源，以供 useTransition 和 Concurrent Mode 使用。
  7. useDeferredValue：与 useTransition 一起使用，用于推迟渲染较不重要的数据。
  8. useSyncExternalStore：与外部数据源集成的实验性 API，用于从外部数据源同步状态。

三、常用的 React 钩子示例：

1. useState：

import React, { useState } from 'react';
function Counter() {
	const [count, setCount] = useState(0);
	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={() => setCount(count + 1)}>Increment</button>
		</div>
	);
}

2. useEffect：

import React, { useState, useEffect } from 'react';
function DataFetching() {
	const [data, setData] = useState([]);
	useEffect(() => {
		fetch('https://api.example.com/data')
		.then(response => response.json())
		.then(data => setData(data));
	}, []);
	return (
		<div>
			{data.map(item => <p key={item.id}>{item.name}</p>)}
		</div>
	);
}

3. useContext：

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedText() {
	const theme = useContext(ThemeContext);
	return <p className={theme}>This is themed text.</p>;
}

4. useReducer：

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function countReducer(state, action) {
	switch (action.type) {
		case 'increment':
		return { count: state.count + 1 };
		case 'decrement':
		return { count: state.count - 1 };
		default:
			return state;
	}
}

function Counter() {
const [state, dispatch] = useReducer(countReducer, initialState);
return (
	<div>
		<p>Count: {state.count}</p>
		<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
		<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
	</div>
	);
}

5. useCallback：

import React, { useState, useCallback } from 'react';
function Button({ onClick }) {
	console.log('Button rendered');
	return <button onClick={onClick}>Click me</button>;
}

function Parent() {
	const [count, setCount] = useState(0);
	const handleClick = useCallback(() => {
		setCount(count + 1);
	}, [count]);

	return (
		<div>
			<p>Count: {count}</p>
			<Button onClick={handleClick} />
		</div>
	);
}

6. useMemo：

import React, { useState, useMemo } from 'react';
       
function ExpensiveCalculation() {
	console.log('Expensive calculation');
	// Simulating a time-consuming calculation
	return 5 + 10;
}

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

	const result = useMemo(() => {
		return ExpensiveCalculation();
	}, [count]);
       
	return (
		<div>
			<p>Result: {result}</p>
			<button onClick={() => setCount(count + 1)}>Increment</button>
		</div>
	);
}

四、不常用的 React 钩子示例：

1. useImperativeHandle：

import React, { useRef, forwardRef, useImperativeHandle } from 'react';

const FancyInput = forwardRef((props, ref) => {
	const inputRef = useRef();

	useImperativeHandle(ref, () => ({
		focus: () => {
			inputRef.current.focus();
		}
	}));
	return <input ref={inputRef} />;
});

2. useLayoutEffect：

import React, { useState, useLayoutEffect } from 'react';
       
function LayoutEffectExample() {
	const [width, setWidth] = useState(0);

	useLayoutEffect(() => {
		setWidth(document.documentElement.clientWidth);
	}, []);
       
	return <p>Window width: {width}</p>;
}

3. useDebugValue：

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

function useCustomHook() {
	const [count, setCount] = useState(0);
	useDebugValue(`Count: ${count}`);
	return count;
}

4. useRef：

import React, { useRef } from 'react';

function FocusableInput() {
	const inputRef = useRef();

	const focusInput = () => {
		inputRef.current.focus();
	};
	return (
		<div>
			<input ref={inputRef} />
			<button onClick={focusInput}>Focus Input</button>
		</div>
	);
}

5. useTransition：

import React, { useState, useTransition } from 'react';
       
function AsyncContent() {
	const [data, setData] = useState([]);
	const [startTransition, isPending] = useTransition();
       
	const fetchData = () => {
		startTransition(() => {
			fetch('https://api.example.com/data')
				.then(response => response.json())
				.then(data => setData(data));
		});
	};
	return (
           <div>
             <button onClick={fetchData} disabled={isPending}>Fetch Data</button>
             {data.map(item => <p key={item.id}>{item.name}</p>)}
           </div>
	);
}

6.useMutableSource

useMutableSource 是一个用于实验性的 API，通常用于与 React 的 Concurrent Mode 结合使用。它允许你创建一个可变数据源，可以在更新时传递给 React，以实现异步更新的状态。

import React, { useMutableSource } from 'react';

const dataSource = {
	// 在这里定义你的数据源方法
};
    
    function CustomComponent() {
      const mutableSource = useMutableSource(dataSource);
    
      return <div>{mutableSource.getData()}</div>;
    }

7.useDeferredValue

useDeferredValue 与 useTransition 一起使用，用于将某些数据的渲染推迟到未来帧，以平滑地处理异步数据的更新。

import React, { useState, useTransition, useDeferredValue } from 'react';

function AsyncContent() {
	const [data, setData] = useState([]);
	const [startTransition, isPending] = useTransition();
	const fetchData = () => {
		startTransition(() => {
          fetch('https://api.example.com/data')
            .then(response => response.json())
            .then(data => setData(data));
        });
	};
    
	return (
		<div>
			<button onClick={fetchData} disabled={isPending}>
				Fetch Data
			</button>
			{data.map(item => (
				<p key={item.id}>
					<DeferredText text={item.name} />
				</p>
			))}
		</div>
	);
}
    
function DeferredText({ text }) {
	const deferredText = useDeferredValue(text);
	return <span>{deferredText}</span>;
}

8.useSyncExternalStore

useSyncExternalStore 是一个实验性 API，用于将 React 组件状态与外部数据源同步，适用于从外部数据源获取数据并同步状态。

import React, { useSyncExternalStore } from 'react';
    
const externalStore = {
	// 定义与外部数据源交互的方法
};
    
function SyncedComponent() {
	const syncedData = useSyncExternalStore(externalStore);
	return <div>Data from external store: {syncedData}</div>;
}
俎树振
关注
react-React钩子来处理React组件中的异步操作如获取数据
08-14
React钩子来处理React组件中的异步操作（如获取数据）
tetris-reacthooks:用React钩子制作的俄罗斯方块俄罗斯方块游戏
04-04
本篇文章将深入探讨如何利用React Hooks和自定义钩子来构建一款经典的俄罗斯方块游戏，以此帮助开发者更深入地理解React Hooks的运用。 一、React Hooks基础 React Hooks是自React 16.8版本起引入的一个重大特性，...
react中的常用钩子函数总结
m0_37635053的博客
09-15 6903
react中的常用钩子函数总结 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性 一、useState:让函数组件也可以有state状态, 并进行状态数据的读写操作 1、语法:const [xxx, setXxx] = React.useState(initValue) 2、解释： useState()说明: 参数: 第一次初始化指定的值在内部作缓存 返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为
react 基础语法
最新发布
小白小白从不日别的博客
09-13 2020
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
React中常见的九种钩子函数
qq_54601164的博客
06-20 2934
react中函数组件中常见的钩子函数
【React】Hooks入门教程（二、React最常用的四种钩子）
Lachesis_的博客
12-13 583
这个 API 是 React 的未来，有必要深入理解。本文谈谈我的理解，简单介绍它的用法，帮助大家快速上手。 阅读本文需要有 React 基础。如果你还没学会 React，可以先看一下它的教程。 [更新] 我后来又写了一篇《轻松学会 React 钩子：以 useEffect() 为例》，补充了对 Hooks 设计思想的解释，建议大家可以先阅读那篇文章。 一、组件类的缺点 React 的核心是组件。v16.8 版本之前，组件的标准写法是类（class）。下面是一个简单的组件类。 import React.
react钩子
qq_38414213的博客
05-04 192
一：获取动态的派生属性（state的值来自于props） static getDerivedStateFromProps(nextProps){ return { m:nextProps.n } 旧： componentWillReceiveProps(nextProps){ this.setState({}) } 二：是否刷新shouldComponentUpdate(...
前端面试题全解析：238题深入理解vue与react
理解原型和原型链对于深入理解JavaScript的面向对象编程至关重要。面试中可能会问到如何理解原型链、如何实现原型继承、以及原型链中的属性查找机制。 4. Vue.js Vue.js是一个流行的前端框架，以其简洁的API和灵活...
react-query-hook：用于查询字符串的读写变量的自定义React钩子
02-10
`react-query-hook` 是一个自定义的React钩子，专门设计用于处理查询字符串中的变量读取和写入，从而简化了与URL参数交互的过程。这个库利用了React Hooks的灵活性和JavaScript的强大力量，为开发者提供了一种高效且...
React自定义钩子的使用技巧与实践解析
资源摘要信息:"React自定义钩子（Custom Hooks）是React.js中的一个高级特性，它允许开发者在函数组件中复用状态逻辑。自定义钩子的概念基于现有的React Hooks，如useState和useEffect等，但它们可以被封装起来，...
react-qrcodes:React挂钩产生QR码
05-01
React钩子用于生成QR码。 :wrapped_gift: 特征 渲染为画布和图像 支持数字，字母数字，汉字和字节模式 支持日语，中文，希腊语和西里尔字母 支持多字节字符（例如表情符号笑容） :wrench: 安装 react-qrcodes在...
react钩子函数
hsany330的专栏
08-16 1344
1. 在生命周期中的哪一步你应该发起 AJAX 请求？ 我们应当将AJAX 请求放到 componentDidMount 函数中执行，主要原因有下： 放到componentWillMount不好. React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能，其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这...
React Hooks（钩子函数）
weixin_52148548的博客
06-14 7453
首先：React的组件创建方式，一种是类组件，一种是纯函数组件。React团队认为组件的最佳写法应该是函数，而不是类。但是纯函数组件有着类组件不具备的特点：这就注定，纯函数组件只能做UI展示的功能，如果涉及到状态的管理与切换，我们就必须得用类组件或者redux，但是在简单的页面中使用类组件或者redux会使代码显得很重。因此，React团队设计了React hooks（钩子）。React Hooks的意思是：组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码“钩”进来。四种常用的钩子：我们知道
React Hooks 常用钩子
Y____X的博客
11-02 344
React Hooks useState const [count, setCount] = useState(0); // 等价于 const _useState = useState(0); const count = _useState[0]; const setCount = _useState[1]; useEffect // 异步，处理副作用（即不是主逻辑，比如生命周期，接口请求等） useEffect(() => { console.log('不传参相当于componentDi
React 常用的Hooks(钩子函数)
m0_62676426的博客
01-11 1784
Hooks可以帮助在组件中使用不同的 React 功能。所有的Hooks函数只能在函数组件中使用，在类组件中使用会报错，下面介绍几个常用的Hooks函数
react钩子函数理解
qq_45800365的博客
08-09 1205
React钩子（Hooks）是React 16.8版本引入的一种特性，用于在无需编写类组件的情况下，在函数组件中添加状态管理和其他React特性。React钩子解决了函数组件在处理状态、副作用和代码复用方面的一些问题，使得代码更加清晰、可读和可维护。React钩子提供了一些特定的函数，可以在函数组件内部调用，这些函数可以用来管理组件的状态、引入副作用、访问上下文等。一些常用的React钩子包括：useState: 用于在函数组件中添加状态管理。
React Hooks 常用钩子及基本原理
热门推荐
绿足 博客
02-04 1万+
一. 简述 在以往的react16.8前， 我们React组件创建方式基本包含两种方式： 类组件， 纯函数组件。 React 团队希望组件最佳写法应该是函数，而不是类。 然而常规的纯函数组件有以下特点： 没有状态 没有生命周期 没有 this 因存在如上特点，使得纯函数组件只能做UI展示的功能， 涉及到状态的管理与切换就不得不用到类组件或这redux。 但因为简单的页面也是用类组件，同时要继承...
react钩子_React钩子简介
cuk0051的博客
08-28 534
react钩子Hooks is a feature that will be introduced in React 16.7, and is going to change how we write React apps in the future. Hooks是一个将在React 16.7中引入的功能，它将在将来改变我们编写React应用程序的方式。 Before Hooks appea...
react钩子_如何使用React钩子
cumian8165的博客
08-03 931
react钩子by Sergei Gannochenko 通过谢尔盖·甘诺琴科(Sergei Gannochenko) 如何使用React钩子 (How to use React hooks) React 16.7.0 is finally out. It has no hooks on-board, but sooner or later, React Hooks will be there...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

俎树振

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值