React Hooks花式玩法

大家好,我是小杨,一个在React坑里摸爬滚打了6年的老司机。今天不整虚的,咱们直接上干货,聊聊那些让你又爱又恨的React Hooks。

记得我刚接触Hooks那会儿,看着useEffect的依赖数组差点把头发薅秃。现在回头看看,其实Hooks用好了真香!接下来我就用最直白的方式,带大家解锁这些神奇的函数。

🎣 useState:最熟悉的"老伙计"

这绝对是Hooks里的"国民函数",简单到哭:

jsx 复制代码
function MyComponent() {
  const [count, setCount] = useState(0); // 初始化值为0
  
  return (
    <div>
      <p>我点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>
        点我+1
      </button>
    </div>
  );
}

有个小技巧:当新状态依赖旧状态时,用函数式更新更靠谱:

jsx 复制代码
setCount(prevCount => prevCount + 1)  // 这样永远不会丢更新

🔄 useEffect:组件里的"多面手"

这个Hook我愿称之为"瑞士军刀",能处理各种副作用:

jsx 复制代码
useEffect(() => {
  // 这里是你的副作用代码
  const timer = setTimeout(() => {
    console.log('我延迟执行了');
  }, 1000);
  
  // 返回清理函数(可选)
  return () => clearTimeout(timer);
}, [dependency]); // 依赖项数组

踩坑预警:

  1. 忘记加依赖项 → 闭包陷阱警告!
  2. 清理函数没写 → 内存泄漏警告!

🧠 useMemo & useCallback:性能优化"双雄"

这对兄弟专门治各种"重复渲染不服":

jsx 复制代码
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b); // 只有a/b变化时才重新计算
}, [a, b]);

const memoizedCallback = useCallback(() => {
  doSomething(a, b); // 同样的,依赖不变就返回记忆化函数
}, [a, b]);

真实案例:我在做大数据量表格时,用useMemo缓存计算结果,渲染速度直接起飞🛫

🔗 useRef:不只是DOM引用

你以为它只能拿DOM节点?Too young!

jsx 复制代码
const intervalRef = useRef();

useEffect(() => {
  intervalRef.current = setInterval(() => {
    // 做点什么
  }, 1000);
  
  return () => clearInterval(intervalRef.current);
}, []);

// 还可以存任意可变值,且不会触发重渲染
const counterRef = useRef(0);
counterRef.current += 1;

🧩 自定义Hook:高阶玩法

这才是Hooks的精髓------逻辑复用!比如我封装了个useMousePosition:

jsx 复制代码
function useMousePosition() {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  useEffect(() => {
    const updatePosition = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
    };
    
    window.addEventListener('mousemove', updatePosition);
    return () => window.removeEventListener('mousemove', updatePosition);
  }, []);
  
  return position;
}

// 使用
const { x, y } = useMousePosition();

💡 实战小贴士

  1. Hooks调用顺序必须稳定(别把Hook放在条件语句里!)
  2. useEffect依赖项要诚实(eslint-plugin-react-hooks是你最好的朋友)
  3. 复杂状态考虑useReducer(比useState更适合管理多个子状态)

最近在项目里用useReducer+useContext搞定了复杂的全局状态管理,那叫一个丝滑~

🚀 最后说两句

Hooks用好了是真香,但千万别为了用而用。Class组件不会马上消失,关键是根据场景选择合适的方式。

如果觉得有帮助,不妨点个赞❤️ 有问题的老铁欢迎评论区交流,我常在掘金摸鱼~

⭐ 写在最后

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

✅ 一起探讨技术加qq交流群:906392632

最后感谢各位的耐心观看,既然都到这了,点个 👍赞再走吧!

相关推荐
知识分享小能手9 分钟前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
文心快码BaiduComate17 分钟前
限时集福!Comate挂件/皮肤上线,符(福)气掉落中~
前端·后端·程序员
勇敢di牛牛17 分钟前
vue3 + mars3D 三分钟画一个地球
前端·vue.js
IT_陈寒1 小时前
Python+AI实战:用LangChain构建智能问答系统的5个核心技巧
前端·人工智能·后端
袁煦丞2 小时前
MoneyPrinterTurbo一键生成短视频:cpolar内网穿透实验室第644个成功挑战
前端·程序员·远程工作
代码小学僧2 小时前
让 AI 真正帮你开发:前端 MCP 实用技巧分享
前端
晴殇i2 小时前
前端鉴权新时代:告别 localStorage,拥抱更安全的 JWT 存储方案
前端·javascript·面试
Json____2 小时前
使用node Express 框架框架开发一个前后端分离的二手交易平台项目。
java·前端·express
since �2 小时前
前端转Java,从0到1学习教程
java·前端·学习
码农刚子2 小时前
ASP.NET Core Blazor简介和快速入门 二(组件基础)
javascript·后端