使用React Hooks代替类的6大理由( 三 ) Reacthooks已经出来有一段时间了

虽然我们可以使用渲染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官网，获取最新资讯～