使用React Hooks代替类的6大理由( 三 )
虽然我们可以使用渲染props 和高阶组件来解决这个问题 ， 但由于我们必须重构组件 ， 这会引入额外的成本 ， 到头来会变得更麻烦 。
React Hooks 又是怎么做的呢？使用自定义 React Hooks ， 你可以提取这些可重用的状态逻辑并分别测试它们 。
我们可以从 ShowCount 示例中提取一个自定义 hook 。
import { useState, useEffect } from "react";export function useCount(serviceSubject) {const [count, setCount] = useState();useEffect(() => {serviceSubject.subscribe((count) => {setCount(count);});return () => {serviceSubject.unsubscribe();};}, [serviceSubject]);return [count, setCount];}自定义 hook 来共享状态逻辑
使用上面的自定义 hook ， 我们可以像下面这样重写 ShowCount 组件 。 注意 ， 我们必须将数据源作为参数传递给这个自定义 hook 。
import { useCount } from "./use-count";export function ShowCount(props) {const [count, setCount] = useCount(props.serviceSubject);useEffect(() => {setCount(-1);}, [setCount]);return (Count : {count});}ShowCount 组件 ， 带有数据源参数
请注意 ， 我们在父组件 ， 而不是 ShowCount 组件中调用 getCounts 。 否则 ， serviceSubject 每次运行 ShowCount 时都将有一个新值 ， 而我们将无法获得预期的结果 。
结论切换到 React Hooks 的理由有很多 ， 但我已经提到了其中一些最令人信服的原因 ， 这些足够让我改用 React Hooks 了 。 如果查看官方文档 ， 你会发现React Hooks 有很多有趣的功能 。 请大家也谈一谈自己的React Hooks 之旅吧 。
你可以在此处找到完整的源代码 。
原文链接：
关注我并转发此篇文章 ， 私信我“领取资料” ， 即可免费获得InfoQ价值4999元迷你书 ， 点击文末「了解更多」 ， 即可移步InfoQ官网 ， 获取最新资讯～
推荐阅读
- Biogen将使用Apple Watch研究老年痴呆症的早期症状
- Eyeware Beam使用iPhone追踪玩家在游戏中的眼睛运动
- 或使用天玑1000+芯片？荣耀V40已全渠道开启预约
- 苹果将推出使用mini LED屏的iPad Pro
- 手机能用多久？如果出现这3种征兆，说明“默认使用时间”已到
- 苹果有望在2021年初发布首款使用mini LED显示屏的 iPad Pro
- ReactOS年度报告：改进shell，增强应用管理
- 笔记本保养有妙招！学会这几招笔记本再战三年
- 数据可视化三节课之二：可视化的使用
- 索尼sw77与sw55的使用差别感受