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

React 核心 Hook 与冷门技巧：useReducer、useEffect、useRef 及 is 属性全解析

news 2025/9/11 7:07:33

📚 前言

React 的函数组件 + Hooks 模式已经成为现代前端开发的主流。相比类组件，Hooks 让状态管理和副作用处理更加简洁和可复用。但在实际开发中，除了常用的 useState 和 useEffect，还有很多“进阶武器”值得我们掌握。

本文将深入讲解三个核心 Hook：useReducer、useEffect、useRef，并揭秘一个常被忽视但极具潜力的 HTML 属性——is 在 React 中的应用场景，助你写出更优雅、更高效的 React 代码。

一、`useReducer`：复杂状态管理的利器

1.1 什么是 `useReducer`？

useReducer 是 React 提供的一个 Hook，用于管理组件中复杂的状态逻辑。它类似于 Redux 的 reducer 模式，但更轻量，无需引入额外库。

1.2 基本语法

const [state, dispatch] = useReducer(reducer, initialState);

reducer：一个纯函数 (state, action) => newState
initialState：初始状态
dispatch：用于派发动作（action）来更新状态

1.3 使用场景

✅ 状态结构复杂（如嵌套对象）
✅ 多个状态相互依赖
✅ 状态更新逻辑较多

1.4 示例：计数器

function reducer(state, action) {switch (action.type) {case 'increment': return { count: state.count + 1 };case 'decrement': return { count: state.count - 1 };default: throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(reducer, { count: 0 });return (<div>Count: {state.count}<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></div>);
}

💡 优点：逻辑集中、可预测、易于测试。

二、`useEffect`：副作用的管理中心

2.1 什么是 `useEffect`？

useEffect 用于在函数组件中执行副作用操作，如数据获取、订阅、手动 DOM 操作等。它是 componentDidMount、componentDidUpdate 和 componentWillUnmount 的组合。

2.2 基本语法

useEffect(() => {// 副作用逻辑return () => {// 清理逻辑（可选）};
}, [dependencies]);

2.3 常见用法

✅ 组件挂载后执行一次

useEffect(() => {fetchData();
}, []); // 空依赖数组 → 只执行一次

✅ 监听某个状态变化

useEffect(() => {fetchUserData(userId);
}, [userId]); // userId 变化时重新执行

✅ 清理资源（防止内存泄漏）

useEffect(() => {const timer = setInterval(() => console.log('tick'), 1000);return () => clearInterval(timer); // 组件卸载时清理
}, []);

⚠️ 注意：避免无限循环、正确处理异步操作。

三、`useRef`：持久化引用的“盒子”

3.1 什么是 `useRef`？

useRef 返回一个可变的引用对象，其 .current 属性可以保存任意值，并且修改它不会触发组件重新渲染。

3.2 核心用途

✅ 1. 访问 DOM 元素

const inputRef = useRef(null);
useEffect(() => {inputRef.current.focus(); // 自动聚焦
}, []);
<input ref={inputRef} type="text" />

✅ 2. 存储可变变量（不触发重渲染）

const timerRef = useRef(null);
timerRef.current = setInterval(...);
// 清理时使用 clearInterval(timerRef.current)

✅ 3. 获取上一次的值

function usePrevious(value) {const ref = useRef();useEffect(() => { ref.current = value; });return ref.current;
}

📌 关键区别：useRef 不会触发重渲染，而 useState 会。

四、`is` 属性：Web Components 的秘密武器

4.1 `is` 是 React 关键词吗？

❌ 不是！ is 是 HTML 标准属性，用于定义自定义内置元素（Customized Built-in Elements），属于 Web Components 技术栈。

4.2 作用与语法

让一个自定义元素继承原生 HTML 元素的行为：

<button is="custom-toggle-button">切换</button>

4.3 在 React 中的使用

<button is="fancy-button" onClick={handleClick}>提交
</button>

前提：已通过 customElements.define('fancy-button', ...) 注册组件。

4.4 注意事项

仅在使用 Web Components 时需要
不要误用于条件渲染（如 <div is={true}> ❌）
老浏览器需 polyfill 支持

✅ 总结对比

特性	`useReducer`	`useEffect`	`useRef`	`is` 属性
用途	管理复杂状态	处理副作用	持久化引用	扩展原生元素
是否触发重渲染	否（通过 dispatch）	否（副作用本身）	否	否
典型场景	表单、多状态联动	数据请求、定时器	DOM 操作、实例变量	Web Components
是否 React 独有	✅ 是	✅ 是	✅ 是	❌ 否（HTML 标准）