一文搞懂 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 组件的 componentDidMount、componentDidUpdate、componentWillUnmount 三合一。

🎯 `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！"

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

咱们下篇见 👋

一文搞懂 React Hooks：写代码像聊天一样轻松！