深入掌握ReactHooks，让你的应用开发如虎添翼

作者：手机用户2502860763 | 来源：互联网 | 2024-10-24 11:57

本文首发于政采云前端团队博客，详细探讨了ReactHooks的核心概念与实用技巧。通过深入解析常见Hooks的使用场景和高级用法，帮助开发者在实际项目中更加灵活高效地运用ReactHooks，提升应用开发效率和代码可维护性。无论是初学者还是有经验的开发者，都能从中获得宝贵的知识和实践经验。

本文首发于政采云前端团队博客&＃xff1a;看完这篇&＃xff0c;你也能把 React Hooks 玩出花
https://www.zoo.team/article/react-hooks

本文中出现的部分名称映射&＃xff1a;

函数式组件 &＃61;> Function Component

类组件 &＃61;> Class Component

工具函数 &＃61;> Util Function

钩子 &＃61;> React Hook

初始值 &＃61;> initialValue

先讲概念

React v16.7.0-alpha 中第一次引入了 Hooks 的概念&＃xff0c;在 v16.8.0 版本被正式发布。React Hooks 在 React 中只是对 React Hook 的概念性的描述&＃xff0c;在开发中我们用到的实际功能都应该叫做 React hook。

React Hook 是一种特殊的函数&＃xff0c;其本质可以是函数式组件&＃xff08;返回 Dom 或 Dom 及 State &＃xff09;&＃xff0c;也可以只是一个工具函数&＃xff08;传入配置项返回封装后的数据处理逻辑&＃xff09;。

再总结

React Hooks 的出现使函数式组件变得焕然一新&＃xff0c;其带来的最大的变化在于给予了函数式组件类似于类组件生命周期的概念&＃xff0c;扩大了函数式组件的应用范围。

目前函数式组件基本用于纯展示组件&＃xff0c;一旦函数式组件耦合有业务逻辑&＃xff0c;就需要通过 Props 的传递&＃xff0c;通过子组件触发父组件方法的方式来实现业务逻辑的传递&＃xff0c;Hooks 的出现使得函数组件也有了自己的状态与业务逻辑&＃xff0c;简单逻辑在自己内部处理即可&＃xff0c;不再需要通过 Props 的传递&＃xff0c;使简单逻辑组件抽离更加方便&＃xff0c;也使使用者无需关心组件内部的逻辑&＃xff0c;只关心 Hooks 组件返回的结果即可。

在我看来&＃xff0c;Hooks 组件的目标并不是取代类组件&＃xff0c;而是增加函数式组件的使用率&＃xff0c;明确通用工具函数与业务工具函数的边界&＃xff0c;鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。

之所以把总结放在前面&＃xff0c;是想让大家在看后面的内容时有一个整体的概念去引导大家去思考 React Hooks 具体给函数式组件带来了什么变化。

Hooks 初识

官方提供的钩子

目前官方提供的钩子共分为两种&＃xff0c;分为基本钩子以及拓展钩子

基本钩子共有&＃xff1a;

useState 、useEffect 、 useContext

额外的钩子有&＃xff1a;

useRef 、useCallback 、useMemo 、

useReducer 、useLayoutEffect 、

useImperativeHandle 、useDebugValue

不同钩子用法

useState

该钩子用于创建一个新的状态&＃xff0c;参数为一个固定的值或者一个有返回值的方法。钩子执行后的结果为一个数组&＃xff0c;分别为生成的状态以及改变该状态的方法&＃xff0c;通过解构赋值的方法拿到对应的值与方法。

使用方法如下&＃xff1a;

export default function HookDemo() {
  const [count, changeCount] &＃61; useState(0);

  return (
    <div>
      {count}
      <button onClick&＃61;{() &＃61;> { changeCount(Math.ceil(Math.random() * 1000)); }}>
        改变count
      button>
    div>
  );
}

useEffect

顾名思义&＃xff0c;执行副作用钩子。主要用于以下两种情况&＃xff1a;

函数式组件中不存在传统类组件生命周期的概念&＃xff0c;如果我们需要在一些特定的生命周期或者值变化后做一些操作的话&＃xff0c;必须借助 useEffect 的一些特性去实现。
useState 产生的 changeState 方法并没有提供类似于 setState 的第二个参数一样的功能&＃xff0c;因此如果需要在 State 改变后执行一些方法&＃xff0c;必须通过 useEffect 实现。

该钩子接受两个参数&＃xff0c;第一个参数为副作用需要执行的回调&＃xff0c;生成的回调方法可以返回一个函数&＃xff08;将在组件卸载时运行&＃xff09;&＃xff1b;第二个为该副作用监听的状态数组&＃xff0c;当对应状态发生变动时会执行副作用&＃xff0c;如果第二个参数为空&＃xff0c;那么在每一个 State 变化时都会执行该副作用。

使用方法如下&＃xff1a;

const [count, changeCount] &＃61; useState(0);

// 将在count变化时打印最新的count数据
useEffect(() &＃61;> {
message.info(&＃96;count发生变动&＃xff0c;最新值为${count}&＃96;);
}, [count])

在上面代码中我们实现了在 useEffect 这个钩子适用情况中的第二种情况&＃xff0c;那么如何使用该钩子才能实现类似于类组件中生命周期的功能呢&＃xff1f;既然第一个参数是副作用执行的回调&＃xff0c;那么实现我们所要功能的重点就应该在第二个参数上了。

componentDidMount && componentWillUnmout&＃xff1a;这两个生命周期只在页面挂载/卸载后执行一次。前面讲过&＃xff0c;所有的副作用在组件挂载完成后会执行一次 &＃xff0c;如果副作用存在返回函数&＃xff0c;那么返回的函数将在卸载时运行。借助这样的特性&＃xff0c;我们要做的就是让目标副作用在初始化执行一次后再也不会被调用&＃xff0c;于是只要让与该副作用相关联的状态为空&＃xff0c;不管其他状态如何变动&＃xff0c;该副作用都不会再次执行&＃xff0c;即实现了 componentDidMount 与 componentWillUnmout。

import React, { useState, useEffect } from &＃39;react&＃39;;
import { message } from &＃39;antd&＃39;;

function Child({ visible }) {
  useEffect(() &＃61;> {
    message.info(&＃39;我只在页面挂载时打印&＃39;);
    return () &＃61;> {
      message.info(&＃39;我只在页面卸载时打印&＃39;);
    };
  }, []);

  return visible ? &＃39;true&＃39; : &＃39;false&＃39;;
}

export default function HookDemo() {
  const [visible, changeVisible] &＃61; useState(true);

  return (
    <div>
      {
        visible && <Child visible&＃61;{visible} />
      }
      <button onClick&＃61;{() &＃61;> { changeVisible(!visible); }}>
        改变visible
      button>
    div>
  );
}

componentDidUpdate&＃xff1a;该生命周期在每次页面更新后都会被调用。那么按照之前的逻辑&＃xff0c;就应该把所有的状态全部放在第二个状态中&＃xff0c;但是这样的话新增/删除一个状态都需要改变第二参数。其实&＃xff0c;如果第二个参数为空&＃xff0c;那么在每一个 State 变化时都会执行该副作用&＃xff0c;那么如果要实现 componentDidUpdate 就非常简单了。

useEffect(() &＃61;> {
// ...副作用逻辑
}) // 注意上面说的关联状态为空不是说不传递第二个参数&＃xff0c;而是第二个参数应该为一个空数组

在类组件中&＃xff0c;如果在 componentDidMount 中多次调用 setState 设置一个值&＃xff08;当然不推荐这样做&＃xff09;&＃xff0c;并在成功的回调中打印该值&＃xff0c;那么最后的结果很可能会打印很多个相同的最后一次设置的值。是因为类的 setState 是一个类异步的结果&＃xff0c;他们会将所有变动的内容进行收集然后在合适的时间去统一赋值。
而在 useEffect 中&＃xff0c;所有的变量的值都会保留在该副作用执行的时刻&＃xff0c;类似于 for 循环中的 let 或者闭包&＃xff0c;所有的变量都维持在副作用执行时的状态&＃xff0c;也有人称这个为 Capture Value。

useCallback

生成 Callback 的钩子。用于对不同 useEffect 中存在的相同逻辑的封装&＃xff0c;减少代码冗余&＃xff0c;配合 useEffect 使用。

该钩子先看例子会比较好理解一下&＃xff1a;

const [count1, changeCount1] &＃61; useState(0);
const [count2, changeCount2] &＃61; useState(10);

const calculateCount &＃61; useCallback(() &＃61;> {
  if (count1 && count2) {
    return count1 * count2;
  }
  return count1 &＃43; count2;
}, [count1, count2])

useEffect(() &＃61;> {
    const result &＃61; calculateCount(count, count2);
    message.info(&＃96;执行副作用&＃xff0c;最新值为${result}&＃96;);
}, [calculateCount])

、

在上面的例子中我们通过 useCallback 的使用生成了一个回调&＃xff0c;useCallback 的使用方法和 useEffect 一致&＃xff0c;第一个参数为生成的回调方法&＃xff0c;第二个参数为该方法关联的状态&＃xff0c;任一状态发生变动都会重新生成新的回调。

通过上面代码的使用&＃xff0c;我们将 count1 / count2 的值与一个叫做 calculateCount 的方法关联了起来&＃xff0c;如果组件的副作用中用到计算 count1 和 count2 的值的地方&＃xff0c;直接调用该方法即可。

其中和直接使用 useEffect 不同的地方在于使用 useCallback 生成计算的回调后&＃xff0c;在使用该回调的副作用中&＃xff0c;第二个参数应该是生成的回调。其实这个问题是很好理解的&＃xff0c;我们使用 useCallback 生成了一个与 count1 / count2 相关联的回调方法&＃xff0c;那么当关联的状态发生变化时会重新生成新的回调&＃xff0c;副作用监听到了回调的变化就会去重新执行副作用&＃xff0c;此时 useCallback 和 useEffect 是按顺序执行的&＃xff0c; 这样就实现了副作用逻辑的抽离。

useRef

useRef 接受一个参数&＃xff0c;为 ref 的初始值。类似于类组件中的 createRef 方法 &＃xff0c;该钩子会返回一个对象&＃xff0c;对象中的 current 字段为我们 指向的实例 / 保存的变量&＃xff0c;可以实现获得目标节点实例或保存状态的功能。

useRef 保存的变量不会随着每次数据的变化重新生成&＃xff0c;而是保持在我们最后一次赋值时的状态&＃xff0c;依靠这种特性&＃xff0c;再配合 useCabllback 和 useEffect 我们可以实现 preProps/preState 的功能。

const [count, changeCount] &＃61; useState(0);
const [count1, changeCount1] &＃61; useState(0);
// 创建初始值为空对象的prestate
const preState &＃61; useRef({});
// 依赖preState进行判断时可以先判断&＃xff0c;最后保存最新的state数据
useEffect(() &＃61;> {
  const { ... } &＃61; preState.current;
  if (// 条件判断) {
    // 逻辑
  }
  // 保存最新的state
  preState.current &＃61; {
    count,
    count1,
  }
});

另外&＃xff0c;当我们将使用 useState 创建的状态赋值给 useRef 用作初始化时&＃xff0c;手动更改 Ref 的值并不会引起关联状态的变动。从该现象来看&＃xff0c;useRef 似乎只是在内存空间中开辟了一个堆空间将初始化的值存储起来&＃xff0c;该值与初始化的值存储在不同的内存空间&＃xff0c;修改 Ref 的值不会引起视图的变化。

export default function HookDemo() {
  const [count] &＃61; useState({ count: 1 });

  const countRef &＃61; useRef(count);

  return (
    <div>
      {count.count}
      <button onClick&＃61;{() &＃61;> { countRef.current.count &＃61; 10; }}>
        改变ref
      button>
    div>
  );
}

useRef正常

useMemo

Memo 为 Memory 简写&＃xff0c;useMemo 即使用记忆的内容。该钩子主要用于做性能的优化。

前面我们说过了当状态发生变化时&＃xff0c;没有设置关联状态的 useEffect 会全部执行。同样的&＃xff0c;通过计算出来的值或者引入的组件也会重新计算/挂载一遍&＃xff0c;即使与其关联的状态没有发生任何变化。

在类组件中我们有

shouldComponetUpdate 以及 React.memo

帮助我们去做性能优化&＃xff0c;如果在函数组件中没有类似的功能显示是违背了官方的初衷的&＃xff0c;于是就有了 useMemo 这个钩子。

在业务中&＃xff0c;我们可以用 useMemo 来处理计算结果的缓存或引入组件的防止重复挂载优化。其接受两个参数&＃xff0c;第一个参数为一个 Getter 方法&＃xff0c;返回值为要缓存的数据或组件&＃xff0c;第二个参数为该返回值相关联的状态&＃xff0c;当其中任何一个状态发生变化时就会重新调用 Getter 方法生成新的返回值。

具体代码如下&＃xff1a;

import React, { useState, useMemo } from &＃39;react&＃39;;
import { message } from &＃39;antd&＃39;;

export default function HookDemo() {
  const [count1, changeCount1] &＃61; useState(0);
  const [count2, changeCount2] &＃61; useState(10);

  const calculateCount &＃61; useMemo(() &＃61;> {
    message.info(&＃39;重新生成计算结果&＃39;);
    return count1 * 10;
  }, [count1]);
  return (
    <div>
      {calculateCount}
      <button onClick&＃61;{() &＃61;> { changeCount1(count1 &＃43; 1); }}>改变count1button>
      <button onClick&＃61;{() &＃61;> { changeCount2(count2 &＃43; 1); }}>改变count2button>
    div>
  );
}

初次接受 useMemo 时可能我们会觉得该钩子只是用来做计算结果的缓存&＃xff0c;返回值只能是一个数字或字符串。其实 useMemo 并不关心我们的返回值类型是什么&＃xff0c;它只是在关联状态发生变动时重新调用我们传递的 Getter 方法生成新的返回值&＃xff0c;也就是说 useMemo 生成的是 Getter 方法与依赖数组的关联关系。因此&＃xff0c;如果我们将函数的返回值替换为一个组件&＃xff0c;那么就可以实现对组件挂载/重新挂载的性能优化。

代码如下&＃xff1a;

import React, { useState, useMemo } from &＃39;react&＃39;;
import { message } from &＃39;antd&＃39;;

function Child({ count }) {
  return <p>当前传递的count为:{count}p>;
}

export default function HookDemo() {
  const [count1, changeCount1] &＃61; useState(0);
  const [count2, changeCount2] &＃61; useState(10);

  const child &＃61; useMemo(() &＃61;> {
    message.info(&＃39;重新生成Child组件&＃39;);
    return <Child count&＃61;{count1} />;
  }, [count1]);
  return (
    <div>
      {child}
      <button onClick&＃61;{() &＃61;> { changeCount1(count1 &＃43; 1); }}>改变count1button>
      <button onClick&＃61;{() &＃61;> { changeCount2(count2 &＃43; 1); }}>改变count2button>
    div>
  );
}

其他钩子

今天主要讲了组件中常用的几个钩子&＃xff0c;剩下的未讲解的钩子中&＃xff0c;如

useLayoutEffect useImperativeHandle useDebugValue &＃xff0c;

其功能都比较简单就不在此赘述。

还有一个比较重要的钩子 useContext&＃xff0c;是 createContext 功能在函数式组件中的实现。通过该功能可以实现很多强大的功能&＃xff0c;可以是说官方的 Redux&＃xff0c;很多人对此应该有不少的了解。该钩子内容太多&＃xff0c;后续单独使用一个章节进行描述。

编写自己的钩子

其实从上面讲解的内容来看&＃xff0c;钩子并不是什么高深莫测的东西&＃xff0c;它只是对我们常用逻辑的一些封装&＃xff0c;接下来就会通过具体的代码来教大家写一个自己的钩子。

最基本的钩子

最基本的钩子也就是返回包含了更多逻辑的 State 以及改变 State 方法的钩子。拿计数器来说&＃xff0c;其最基本的就是返回当前的数字以及减少/增加/重置等功能&＃xff0c;明确完功能后可以开始动手做了。

import React, { useState } from &＃39;react&＃39;;

// 编写我们自己的hook&＃xff0c;名字以use开头
function useCounter(initialValue) {
  // 接受初始化的值生成state
  const [count, changeCount] &＃61; useState(initialValue);
  // 声明减少的方法
  const decrease &＃61; () &＃61;> {
    changeCount(count - 1);
  }
  // 声明增加的方法
  const increase &＃61; () &＃61;> {
    changeCount(count &＃43; 1);
  }
  // 声明重置计数器方法
  const resetCounter &＃61; () &＃61;> {
    changeCount(0);
  }
  // 将count数字与方法返回回去
  return [count, { decrease, increase, resetCounter }]
}

export default function myHooksView() {
  // 在函数组件中使用我们自己编写的hook生成一个计数器&＃xff0c;并拿到所有操作方法的对象
  const [count, controlCount] &＃61; useCounter(10);
  return (
      <div>
        当前数量&＃xff1a;{count}
            <button onClick&＃61;{controlCount.decrease}>减少button>
            <button onClick&＃61;{controlCount.increase}>增加button>
            <button onClick&＃61;{controlCount.resetCounter}>重置button>
    div>
  )
}

在上面的例子中&＃xff0c;我们将在 useCounter 这个钩子中创建了一个关联了 initialValue 的状态&＃xff0c;并创建减少/增加/重置的方法&＃xff0c;最终将其通过 return 返回出去。这样在其他组件需要用到该功能的地方&＃xff0c;通过调用该方法拿到其返回值&＃xff0c;即可实现对 useCounter 组件封装逻辑的复用。

演示效果如图&＃xff1a;

返回 DOM 的钩子

返回 DOM 其实和最基本的 Hook 逻辑是相同的&＃xff0c;只是在返回的数据内容上有一些差异&＃xff0c;具体还是看代码&＃xff0c;以一个 Modal 框为例。

import React, { useState } from &＃39;react&＃39;;
import { Modal } from &＃39;antd&＃39;;

function useModal() {
  const [visible, changeVisible] &＃61; useState(false);

  const toggleModalVisible &＃61; () &＃61;> {
    changeVisible(!visible);
  };

  return [(
    <Modal
      visible&＃61;{visible}
      onOk&＃61;{toggleModalVisible}
      onCancel&＃61;{toggleModalVisible}
    >
      弹窗内容
      Modal>
  ), toggleModalVisible];
}

export default function HookDemo() {
  const [modal, toggleModal] &＃61; useModal();
  return (
    <div>
      {modal}
      <button onClick&＃61;{toggleModal}>打开弹窗button>
    div>
  );
}

这样我们就实现了一个返回了弹窗内容以及改变弹窗显示状态的 Hook&＃xff0c;其实可以封装的内容还有很多很多&＃xff0c;可以通过配置项的设置实现更丰富的封装。

演示效果如图&＃xff1a;

钩子/最终总结

钩子总结

从上面的表格中我们可以看出&＃xff0c;在官方提供的 Hook 中&＃xff0c;除了基本的 useState与 useRef外&＃xff0c;其他钩子都存在第二个参数&＃xff0c;第一个方法的执行与第二个参数相互关联。于是我们可以得出一个结论&＃xff0c;在使用了 Hook 的函数式组件中&＃xff0c;我们在使用副作用/引用子组件时都需要时刻注意对代码进行性能上的优化。

最终总结

我在前面的总结里是这么评价 React Hooks 的&＃xff1a;

Hooks 组件的目标并不是取代 class component 组件&＃xff0c;而是增加函数式组件的使用率&＃xff0c;明确通用工具函数与业务工具函数的边界&＃xff0c;鼓励开发者将业务通用的逻辑封装成 React Hooks 而不是工具函数。

希望看完这篇文章的你也有自己的一些看法&＃xff0c;欢迎拍砖讨论。

招贤纳士

招人&＃xff0c;前端&＃xff0c;隶属政采云前端大团队&＃xff08;ZooTeam&＃xff09;&＃xff0c;50 余个小伙伴正等你加入一起浪&＃xff5e; 如果你想改变一直被事折腾&＃xff0c;希望开始能折腾事&＃xff1b;如果你想改变一直被告诫需要多些想法&＃xff0c;却无从破局&＃xff1b;如果你想改变你有能力去做成那个结果&＃xff0c;却不需要你&＃xff1b;如果你想改变你想做成的事需要一个团队去支撑&＃xff0c;但没你带人的位置&＃xff1b;如果你想改变既定的节奏&＃xff0c;将会是“5年工作时间3年工作经验”&＃xff1b;如果你想改变本来悟性不错&＃xff0c;但总是有那一层窗户纸的模糊… 如果你相信相信的力量&＃xff0c;相信平凡人能成就非凡事&＃xff0c;相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程&＃xff0c;亲手参与一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程&＃xff0c;我觉得我们该聊聊。任何时间&＃xff0c;等着你写点什么&＃xff0c;发给 ZooTeam&＃64;cai-inc.com

完

欢迎评论区留下你的精彩评论~

觉得文章不错可以分享到朋友圈让更多的小伙伴看到哦~

客官&＃xff01;在看一下呗

深入掌握ReactHooks，让你的应用开发如虎添翼

先讲概念

再总结

Hooks 初识

官方提供的钩子

不同钩子用法

useState

useEffect

useCallback

useRef

useMemo

其他钩子

编写自己的钩子

最基本的钩子

返回 DOM 的钩子

钩子/最终总结

钩子总结

最终总结

招贤纳士

Flutter 核心技术与混合开发模式深入解析

使用Service Locator模式实现高效的服务命名访问

深入解析 Bootstrap Table 的使用技巧

深入解析：iOS开发中scrollView的正确使用与常见问题解决

U3d 属性面板自定义扩展（多态数组）

腾讯ABS云平台前端面试经验分享

如何在Android中从其他类引用MainActivity

Android异步处理系列文章四篇之三

短视频app源码，Android开发底部滑出菜单

Android GUI 开发：ScrollView 和 HorizontalScrollView 的常见用法

iOS snow animation

深入理解函数式编程中的函子

H5技术实现经典游戏《贪吃蛇》

Android开发：巧妙运用ViewStub写出类似Tab选项卡

实现滑动界面及过渡动画的方法