react常用hook的实现示例
作者：Aphasia
本文主要介绍了react常用hook的实现示例,提供状态管理、副作用处理、引用、跨组件共享及性能优化功能,具有一定的参考价值,感兴趣的可以了解一下
引言💭
自 React 16.8 起，Hook 的引入彻底改变了函数组件的开发方式。Hook 让函数组件拥有了管理状态、处理副作用、访问上下文等能力，大大提高了代码的可复用性和可读性。
一、useState—— 管理组件状态的基础
useState 是最常用的 Hook，用于在函数组件中声明状态变量。
用法示例：
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // 初始值为0
return (
<button onClick={() => setCount(count + 1)}>
点击次数：{count}
</button>
);
}
特点：
- 每次调用
setCount都会触发组件重新渲染。 useState可以接收一个函数作为初始值（惰性初始化）。
二、useEffect—— 副作用处理器
useEffect 用于处理副作用，例如：数据获取、事件监听、DOM 操作等。
用法示例：
import { useEffect } from 'react';
function Timer() {
useEffect(() => {
const id = setInterval(() => {
console.log('tick');
}, 1000);
return () => clearInterval(id); // 清理定时器
}, []); // 仅在组件挂载时执行一次
}
特点：
- 第一个参数是副作用函数。
- 第二个参数是依赖数组，控制副作用的执行时机。
- 返回函数用于清理资源。
注意
在 React 18 及更高版本中，useEffect 在开发模式下会故意执行两次。
- 主要原因
严格模式(Strict Mode)的影响：React 18 在开发模式下默认启用严格模式，严格模式下会故意挂载、卸载、再重新挂载组件，目的是帮助开发者发现副作用中的错误，模拟用户行为（如快速切换页面），确保组件的副作用能够正确处理清理和重新设置。
- 具体表现
useEffect(() => {
console.log("Effect ran"); // 在开发模式下会打印两次
return () => {
console.log("Cleanup"); // 也会执行两次
};
}, []);
三、useRef—— 引用 DOM 或保存可变值
useRef 用于获取 DOM 元素的引用，或在组件间保存一个不会触发重新渲染的变量。
用法示例：
import { useRef } from 'react';
function InputFocus() {
const inputRef = useRef(null);
const handleClick = () => {
inputRef.current.focus(); // 直接操作 DOM
};
return (
<>
<input ref={inputRef} />
<button onClick={handleClick}>聚焦输入框</button>
</>
);
}
特点：
ref.current可以持久保存任意值。- 常用于处理定时器、缓存值等不需触发更新的场景。
四、useContext—— 跨组件共享状态
配合 React 的 Context API，useContext 可让你在任意子组件中访问全局数据。
用法示例：
import { createContext, useContext } from 'react';
const ThemeContext = createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext); // 获取上下文值
return <button className={theme}>主题按钮</button>;
}
特点：
- 避免多层 props 传递。
useContext会订阅 context 变化，自动更新。
五、useMemo—— 缓存计算结果
useMemo 用于缓存耗时计算，避免不必要的重复运算。
用法示例：
import { useMemo } from 'react';
function ExpensiveComponent({ input }) {
const result = useMemo(() => {
return expensiveCalculation(input);
}, [input]);
return <div>{result}</div>;
}
特点：
- 只有依赖项发生变化时才会重新计算。
- 用于优化性能，但请勿滥用。
六、useCallback—— 缓存函数引用
useCallback 返回一个记忆化的函数引用，用于避免子组件重复渲染。
用法示例：
import { useCallback } from 'react';
function Parent() {
const handleClick = useCallback(() => {
console.log('Clicked');
}, []);
return <Child onClick={handleClick} />;
}
特点：
- 与
useMemo类似，但用于缓存函数。 - 在需要传递稳定函数引用时使用（如依赖项、子组件 props）。
七、useReducer—— 更复杂的状态逻辑管理
useReducer 更适合处理状态变化逻辑复杂或状态结构较大的情况。
用法示例：
import { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<button onClick={() => dispatch({ type: 'increment' })}>
{state.count}
</button>
);
}
八、总结
- 使用
useState管理简单状态，useReducer管理复杂状态。 - 使用
useEffect时确保清理副作用，避免内存泄漏。 - 使用
useMemo和useCallback仅在性能瓶颈时启用。 - 将重复逻辑封装成自定义 Hook 提高复用性。
结语✒️
React Hook 为函数组件带来了强大的功能和灵活性。掌握这些常用 Hook，不仅可以简化代码结构，还能提升应用的性能与可维护性。
到此这篇关于react常用hook的实现示例的文章就介绍到这了,更多相关react常用hook内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！