一文搞懂 React Hooks:写代码像聊天一样轻松!

😎 一文搞懂 React Hooks:写代码像聊天一样轻松!

你是不是刚开始学 React 的时候,看到 class 组件就头大?

什么 this.state,什么生命周期函数,绕得人头晕......

别慌!React 官方早就听到大家的吐槽,给我们端上了 Hooks 这道硬菜。

今天,我们就用最通俗的语言、最口语的方式,把 React Hooks 整明白!


🌱 什么是 Hooks?

一句话:Hooks 就是 React 给函数组件加超能力的工具!

以前我们只能在 class 组件里玩的一些骚操作,比如状态管理、生命周期,现在函数组件也能轻松搞定,全靠 Hooks。

而且,Hooks 这个名字很贴切,就像钩子一样,把功能一挂,立马生效!


🧠 最常用的 Hook:useState

说白了,它就是让你在函数组件里拥有"状态"的能力。

jsx 复制代码
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值是 0

  return (
    <div>
      <p>你点了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点我+</button>
    </div>
  );
}

🗣 小剧场时间:

"我点你一下,就加一。"

"你再点,我还加。"

"只要你不关闭页面,我就永远记得你点了多少次。"

是不是比 this.setState 简单多了?


📞 useEffect:副作用管理大师

什么是副作用?说人话就是:

  • 请求接口
  • 操作 DOM
  • 设置订阅
  • 定时器,等等......

这些不能直接写在返回的 JSX 里,就需要 useEffect 来帮我们搞定。

javascript 复制代码
import { useEffect } from 'react';

useEffect(() => {
  console.log('组件挂载啦!');

  return () => {
    console.log('组件卸载啦!');
  };
}, []);

💬 小提示:

  • 没有依赖数组:每次 render 都会执行。
  • 空数组:只在第一次挂载时执行一次。
  • 有依赖:[foo],只有 foo 改变时才执行。

你可以把它理解为以前 class 组件的 componentDidMountcomponentDidUpdatecomponentWillUnmount 三合一。


🎯 useRef:不是拿来操作 DOM 的?!

很多人一听 ref 就想到获取 DOM,确实没错,但它的用途远不止如此!

ini 复制代码
const countRef = useRef(0);

useEffect(() => {
  countRef.current++;
  console.log(`组件 render 了 ${countRef.current} 次`);
});

🔍 核心点:

  • useRef 返回的是一个 不会触发重新渲染的可变对象
  • 你可以把它当作一个"隐藏的全局变量",页面不刷新,但你可以更新它的值。

⛓️ useCallback / useMemo:性能优化两兄弟

这俩经常一起出现,但新手看了头就炸。我们一句话解释:

  • useCallback(fn, deps)缓存函数
  • useMemo(fn, deps)缓存计算结果
scss 复制代码
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);

🎯 什么时候用?

  • 父组件频繁重新渲染,导致子组件的 props 变化。
  • 高性能要求,避免重复创建新函数或新对象。

但注意,不是越多越好,用不好反而拖后腿!


🚀 自定义 Hook:给代码加点灵魂

当你发现多个组件里有重复的状态逻辑,比如表单输入、请求数据,你就可以封装一个自定义 Hook。

ini 复制代码
function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = e => setValue(e.target.value);
  return { value, onChange };
}

// 使用
const username = useInput('');
<input {...username} />

是不是像复制粘贴一样简单?


🎉 总结一下

Hook 名称 用途描述
useState 添加状态
useEffect 管理副作用(请求/定时器)
useRef 获取 DOM、保存变量
useMemo 记住值,避免重复计算
useCallback 记住函数,避免重复创建
自定义 Hook 抽离复用逻辑

🧪 最后的碎碎念

React Hooks 真的是前端史上非常酷的一次"转型",

不仅写法更简洁,还更贴近函数式编程的思想。

当然,别一上来就全用上------先理解,再上手,别为了用而用。


希望这篇文章能让你对 Hooks 有一个"人话版"的理解。

下次你再写函数组件,敢大胆说一句:

"我不用 class,我只用 Hook!"

如果你喜欢这种轻松风格的分享,欢迎点赞、评论、转发!

咱们下篇见 👋

相关推荐
用户4099322502122 分钟前
快速入门Vue3的v-指令:数据和DOM的“翻译官”到底有多少本事?
前端·ai编程·trae
Asort2 分钟前
JavaScript设计模式(二十三)——访问者模式:优雅地扩展对象结构
前端·javascript·设计模式
星辰h11 分钟前
基于JWT的RESTful登录系统实现
前端·spring boot·后端·mysql·restful·jwt
要加油哦~13 分钟前
前端笔试题 | 整理&总结 ing | 跨域 + fetch + credentials(携带cookie)
前端
旺财是只喵15 分钟前
vue项目里使用3D模型
前端·vue.js
golang学习记19 分钟前
从0死磕全栈之使用 Next.js 构建高性能单页应用(SPA)
前端
好奇的候选人面向对象20 分钟前
基于 Element Plus 的 TableColumnGroup 组件使用说明
开发语言·前端·javascript
小纯洁w20 分钟前
vue3.0 使用el-tree节点添加自定义图标造成加载缓慢的多种解决办法
前端·javascript·vue.js
叫我詹躲躲20 分钟前
Vue 3 ref 与 reactive 选哪个?
前端·vue.js
程序员Sunday22 分钟前
Vite 要收费啦?虚拟 DOM 要取消啦?尤雨溪这次玩了把大的!
前端·vue.js