1. Toy模板网首页
  2. > Toy博客

React 钩子汇总

9月前 作者：俎树振 分类：Toy博客 阅读(30) 违法举报

这篇具有很好参考价值的文章主要介绍了React 钩子汇总。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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 组件状态与外部数据源同步，适用于从外部数据源获取数据并同步状态。文章来源地址https://www.toymoban.com/news/detail-694478.html

import React, { useSyncExternalStore } from 'react';
    
const externalStore = {
	// 定义与外部数据源交互的方法
};
    
function SyncedComponent() {
	const syncedData = useSyncExternalStore(externalStore);
	return <div>Data from external store: {syncedData}</div>;
}

到了这里，关于React 钩子汇总的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • react钩子函数理解

    React钩子（Hooks）是React 16.8版本引入的一种特性，用于在无需编写类组件的情况下，在函数组件中添加状态管理和其他React特性。React钩子解决了函数组件在处理状态、副作用和代码复用方面的一些问题，使得代码更加清晰、可读和可维护。 React钩子提供了一些特定的函数，可

    2024年02月13日
    浏览(32)

  • React钩子函数之forwardRef

    React是一个非常流行的JavaScript库，用于构建用户界面。它提供了一种简单而强大的方式来管理组件的状态和行为。其中一个非常有用的功能是钩子函数，它们允许我们在组件的生命周期中执行代码。 在本文中，我们将探讨React的一个重要钩子函数——forwardRef。它可以帮助我们

    2024年02月11日
    浏览(35)

  • react钩子副作用理解

    useEffect(() = { fetch(‘https://api.example.com/data’) .then(response = response.json()) .then(data = setData(data)); }, []); 怎么理解这个[] 在 React 中，useEffect 钩子用于处理副作用，比如数据获取、订阅、手动 DOM 操作等。useEffect 接受两个参数：一个是副作用函数，另一个是依赖数组。 在你提供的代

    2024年02月13日
    浏览(32)

  • React 中的 useCallback 钩子函数

    useCallback 钩子函数有点像 useMemo 一样可以备份信息，而 useCallback 只是备份函数，除非某些参数发生变化，否则他不会重新运行其中的代码， 出现的问题：运行上述代码后，当我们在输入框中输入数字后，再去查看控制台的日志我们可以看到打印出了 params change 的信息，这就

    2024年02月09日
    浏览(40)
  • React 18中新钩子 useDeferredValue 使用

    React 18中新钩子 useDeferredValue 使用

    React是一个流行的用于构建用户界面的JavaScript库,它不断发展以为开发人员提供优化性能的工具。 React 18中引入的此类工具之一是 useDeferredValue 钩子,它旨在通过优先渲染更新来提高应用程序的性能。 useDeferredValue 钩子是React性能优化工具集中相对较新的补充。 它在处理异步数

    2024年01月19日
    浏览(38)

  • React三个状态时触发的相应钩子

    这个阶段由render（）函数触发； 在17版本以后改为UNSAFE_componentWillMount() reason：react为组件异步渲染做准备； 这个钩子常用；一般在这个组件中做一些初始化的事情，利用开启计时器，发起网络请求，请阅消息。（如果小伙伴学过vue的话可以对标created()钩子和mounted()两个钩子）

    2024年02月13日
    浏览(28)

  • React钩子函数之useDeferredValue的基本使用

    在React中，使用钩子函数可以方便地管理组件的状态和副作用。useDeferredValue是React 18中新引入的钩子函数之一，它可以帮助我们优化渲染性能，让组件更加流畅。 useDeferredValue的作用是将一个值延迟更新。这个值可以是状态、属性或其他变量。当这个值发生改变时，React并不会

    2024年02月10日
    浏览(38)

  • React钩子函数之useRef的基本使用

    React钩子函数中的useRef是一个非常有用的工具，它可以用来获取DOM元素或者保存一些变量。在这篇文章中，我们将会讨论useRef的基本使用。 首先，我们需要知道useRef是如何工作的。它返回一个可变的ref对象，这个对象可以在组件的整个生命周期中被访问。当我们需要获取DOM元

    2024年02月10日
    浏览(34)

  • React钩子函数之useEffect，useLayoutEffect与useInsertionEffect的区别

    React钩子函数在React开发中扮演着非常重要的角色。其中，useEffect、useLayoutEffect和useInsertionEffect是三个常用的钩子函数，它们的作用虽然有些相似，但是也存在一些区别。在本文中，我们将详细介绍这三个钩子函数的区别，以及它们在React开发中的应用。 首先，我们来了解一下

    2024年02月11日
    浏览(39)
  • react知识点汇总一

    react知识点汇总一

    以下是一些React中经典的知识点： React是一个由Facebook开发的UI框架，用于构建单页面应用程序。它的特点和优势包括： 组件化 ：React的应用程序主要由多个组件组成，每个组件都封装了自己的逻辑和状态，使得代码结构更加清晰。 虚拟DOM ：React使用虚拟DOM来提高渲染效率和

    2024年02月10日
    浏览(119)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包