📚 前言
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) => newStateinitialState：初始状态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 标准） |
🎯 写在最后
掌握 useReducer、useEffect、useRef 是成为 React 高手的必经之路，而了解 is 属性则能让你在面对 Web Components 项目时游刃有余。
希望本文能帮助你更好地理解这些知识点，并在实际项目中灵活运用。如果你觉得有收获，欢迎点赞、收藏、转发！
关注我，持续输出前端干货！
评论区欢迎交流：你在项目中是如何使用这些特性的？