【React】882- 从业务讲React Hook

太过爱你忘了你带给我的痛 2022-11-04 14:21 152阅读 0赞

![c857a46e5ebb9aa8b0932f2015332aa2.png][]

> 原文地址：zhuanlan.zhihu.com/p/337846156

## 背景 ##

在业务中，会有一个挺常见的场景，就是要有一个按钮，点击以后能把一段文本复制到剪贴版里，大量出现在URL、Token、电话号码之类的地方。

在我们的交互设计中，一个复制按钮可以表现成不同的形式，比如一段文本、一个图标等，当它被点击时，会提示用户已经完成了复制，并且这个提示会在一段时间后消失：

![c0d0a98b28c3f9c7e64283c6d04e7a92.gif][]

## 终版 ##

先来看一下我们怎么快速地实现一个这样的功能。我们使用了react-copy-to-clipboard来提供复制的基本功能，并使用了@huse/transition-state来管理状态。

import React, {FC, useCallback, ReactElement} from 'react';
    import {Tooltip} from 'antd';
    import CopyToClipboard from 'react-copy-to-clipboard';
    import {useTransitionState} from '@huse/transition-state';
    
    interface Props {
        text: string;
        children: ReactElement;
    }
    
    const CopyButton: FC<Props> = ({text, children}) => {
        const [noticing, setNoticing] = useTransitionState(false, 2500);
        const copy = useCallback(() => setNoticing(true), [setNoticing]);
    
        return (
            <Tooltip visible={noticing} title="已复制至剪贴板">
                <CopyToClipboard text={text} onCopy={copy}>
                    {children}
                </CopyToClipboard>
            </Tooltip>
        );
    };
    
    export default CopyButton;

整体的代码是比较简洁的，可以在以下沙盒中试用：

https://codesandbox.io/s/copy-button-o541i?file=/src/CopyButton.tsx:0-703codesandbox.iocopy-button - CodeSandboxCodeSandbox - Copy Buttoncodesandbox.io

## 分解 ##

作为一个简单的组件，它的逻辑并没有什么突出的复杂度，其中比较关键的是如何让出现的“复制成功”的提示信息可以在一段时间后自动消失。

正常情况下，我们会选择使用一个状态来控制提示是否出现：

const [visible, setVisible] = useState(false);
    const show = useCallback(
        () => setVisible(true),
        []
    );

而如果我们需要让它在一定时间后自动消失的话，就势必要在值改变的时候，打开一个定时器，设定指定的时间后将值撤销。我们也知道，凡是遇到定时器的场合，我们就要处理好多次打开定时器之间的竞争关系。

对于这样的场景，有2种解法，第一种是在值变更的时候，命令式地打开定时器。但这时你就需要管理好定时器的标记，记得把前一次的定时给关掉：

const timer = useRef(-1);
    const show = useCallback(
        () => {
            clearTimeout(timer.current);
            setVisible(true);
            timer.current = setTimeout(
                () => setVisible(false),
                delay
            );
        },
        [delay]
    );

切记一点，定时器标记这样的值，它在组件的渲染过程中是不需要的，所以不需要使用一个state去管理，用useRef能保持住值就行。

上面的代码其实有一些瑕疵，当组件销毁后，定时器依然可能执行，调用一次setVisible，此时在开发模式下会产生被控制台里的一个警告，但不会有什么负面效果。

而另一个办法，是使用useEffect来观察值的变化并管理定时器：

useEffect(
        () => {
            if (visible) {
                const tick = setTimeout(
                    () => setVisible(false),
                    delay
                );
    
                return () => clearTimeout(tick);
            }
        },
        [delay, visible]
    );

useEffect带来的“副作用 - 取消副作用”的方式，可以很方便地管理定时器，也不会产生组件销毁后定时器仍然执行的情况，从复杂度上来说，我们更愿意选择这样的方案。

当然上面的代码依然存在一些瑕疵，当delay（也许是从props中来的）变化时，定时器会被取消并生成一次新的定时，但这往往并不是我们想要的效果，因为功能面向用户，用户只需要在点击按钮出现提示后，提示按照预期的时间自动消失。

那如果我们不把delay作为useEffect的一个依赖传递呢？虽然在行为是完全符合预期，却会让eslint报一个错，非常不适合强迫症，也可能导致delay真正发生变化后，用户点击出现的消息并不按最后的delay时间消失。

所以在这里，我们就要启用useRef的“作弊模式”。eslint的规则会判断一个值是否为ref，并识别其不需要加入到useEffect、useCallback等的依赖中。当一个值并不会影响渲染，也不需要引发副作用时，使用useRef去托管就是一个很好的选择。

const delayRef = useRef(delay);
    useEffect(() => {
      delayRef.current = delay;
    }, [delay]);
    
    useEffect(() => {
      if (visible) {
        const tick = setTimeout(() => {
          setVisible(false);
        }, delayRef.current);
        return () => clearTimeout(tick);
      }
    }, [visible]);

而把这些逻辑串起来，形成“一个变化后会自动变回去的状态”这样的概念，额外再抽象一些能力，比如：

1.  可以是什么类型，不局限于boolean，并可以指定初始值。
2.  可以设定默认的持续时间。
3.  可以在每一次修改状态时，指定一个临时的持续时间。
4.  允许在持续过程中手动设置回默认值。

## 总结 ##

从一个简单的复制按钮的交互开始，在这一篇中重点讲解了如何使用状态+定时器的组合来实现一个过渡式的状态，并让状态自动返回初始值，其中的要点有：

1.  与渲染无关的数据可以使用useRef存储，不需要useState管理状态。
2.  可以使用命令式或useEffect的方式管理定时器，但往往使用useEffect更为方便，也能照顾到组件销毁时的情况。
3.  对于不希望引发useEffect的数据，可以使用useRef管理形成一种“作弊”骗过eslint，同时确保能在useEffect的闭包中取到最新的值。

这个hook可用在所有临时出现的场景，包括提示信息、消息气泡等，一定程度上配合CSS的动画能取得更好的效果。

![d435854c8759dd8469496e019d589773.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 100[\+篇原创系列汇总][Link 1]

![3e93ca0ea9e81945cb343a13ee56d830.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 100+ 篇原创文章

[c857a46e5ebb9aa8b0932f2015332aa2.png]: /images/20221023/8b43d51c5456465d81466b55a72534a4.png
[c0d0a98b28c3f9c7e64283c6d04e7a92.gif]: /images/20221023/7aa216330f774893a62f322682eddc7d.png
[d435854c8759dd8469496e019d589773.gif]: /images/20221023/4ccdb8ce6ba24a2cb9f9a85b2ae64fac.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[3e93ca0ea9e81945cb343a13ee56d830.gif]: /images/20221023/23a7c0bbb6644f4593622a6685c9d334.png