【React】882- 從業(yè)務(wù)講React Hook

背景

在業(yè)務(wù)中，會(huì)有一個(gè)挺常見(jiàn)的場(chǎng)景，就是要有一個(gè)按鈕，點(diǎn)擊以后能把一段文本復(fù)制到剪貼版里，大量出現(xiàn)在URL、Token、電話(huà)號(hào)碼之類(lèi)的地方。

在我們的交互設(shè)計(jì)中，一個(gè)復(fù)制按鈕可以表現(xiàn)成不同的形式，比如一段文本、一個(gè)圖標(biāo)等，當(dāng)它被點(diǎn)擊時(shí)，會(huì)提示用戶(hù)已經(jīng)完成了復(fù)制，并且這個(gè)提示會(huì)在一段時(shí)間后消失：

終版

先來(lái)看一下我們?cè)趺纯焖俚貙?shí)現(xiàn)一個(gè)這樣的功能。我們使用了react-copy-to-clipboard來(lái)提供復(fù)制的基本功能，并使用了@huse/transition-state來(lái)管理狀態(tài)。

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="已復(fù)制至剪貼板">
            <CopyToClipboard text={text} onCopy={copy}>
                {children}
            </CopyToClipboard>
        </Tooltip>
    );
};

export default CopyButton;

整體的代碼是比較簡(jiǎn)潔的，可以在以下沙盒中試用：

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

分解

作為一個(gè)簡(jiǎn)單的組件，它的邏輯并沒(méi)有什么突出的復(fù)雜度，其中比較關(guān)鍵的是如何讓出現(xiàn)的“復(fù)制成功”的提示信息可以在一段時(shí)間后自動(dòng)消失。

正常情況下，我們會(huì)選擇使用一個(gè)狀態(tài)來(lái)控制提示是否出現(xiàn)：

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

而如果我們需要讓它在一定時(shí)間后自動(dòng)消失的話(huà)，就勢(shì)必要在值改變的時(shí)候，打開(kāi)一個(gè)定時(shí)器，設(shè)定指定的時(shí)間后將值撤銷(xiāo)。我們也知道，凡是遇到定時(shí)器的場(chǎng)合，我們就要處理好多次打開(kāi)定時(shí)器之間的競(jìng)爭(zhēng)關(guān)系。

對(duì)于這樣的場(chǎng)景，有2種解法，第一種是在值變更的時(shí)候，命令式地打開(kāi)定時(shí)器。但這時(shí)你就需要管理好定時(shí)器的標(biāo)記，記得把前一次的定時(shí)給關(guān)掉：

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

切記一點(diǎn)，定時(shí)器標(biāo)記這樣的值，它在組件的渲染過(guò)程中是不需要的，所以不需要使用一個(gè)state去管理，用useRef能保持住值就行。

上面的代碼其實(shí)有一些瑕疵，當(dāng)組件銷(xiāo)毀后，定時(shí)器依然可能執(zhí)行，調(diào)用一次setVisible，此時(shí)在開(kāi)發(fā)模式下會(huì)產(chǎn)生被控制臺(tái)里的一個(gè)警告，但不會(huì)有什么負(fù)面效果。

而另一個(gè)辦法，是使用useEffect來(lái)觀察值的變化并管理定時(shí)器：

useEffect(
    () => {
        if (visible) {
            const tick = setTimeout(
                () => setVisible(false),
                delay
            );

            return () => clearTimeout(tick);
        }
    },
    [delay, visible]
);

useEffect帶來(lái)的“副作用 - 取消副作用”的方式，可以很方便地管理定時(shí)器，也不會(huì)產(chǎn)生組件銷(xiāo)毀后定時(shí)器仍然執(zhí)行的情況，從復(fù)雜度上來(lái)說(shuō)，我們更愿意選擇這樣的方案。

當(dāng)然上面的代碼依然存在一些瑕疵，當(dāng)delay（也許是從props中來(lái)的）變化時(shí)，定時(shí)器會(huì)被取消并生成一次新的定時(shí)，但這往往并不是我們想要的效果，因?yàn)楣δ苊嫦蛴脩?hù)，用戶(hù)只需要在點(diǎn)擊按鈕出現(xiàn)提示后，提示按照預(yù)期的時(shí)間自動(dòng)消失。

那如果我們不把delay作為useEffect的一個(gè)依賴(lài)傳遞呢？雖然在行為是完全符合預(yù)期，卻會(huì)讓eslint報(bào)一個(gè)錯(cuò)，非常不適合強(qiáng)迫癥，也可能導(dǎo)致delay真正發(fā)生變化后，用戶(hù)點(diǎn)擊出現(xiàn)的消息并不按最后的delay時(shí)間消失。

所以在這里，我們就要啟用useRef的“作弊模式”。eslint的規(guī)則會(huì)判斷一個(gè)值是否為ref，并識(shí)別其不需要加入到useEffect、useCallback等的依賴(lài)中。當(dāng)一個(gè)值并不會(huì)影響渲染，也不需要引發(fā)副作用時(shí)，使用useRef去托管就是一個(gè)很好的選擇。

const delayRef = useRef(delay);
useEffect(() => {
  delayRef.current = delay;
}, [delay]);

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

而把這些邏輯串起來(lái)，形成“一個(gè)變化后會(huì)自動(dòng)變回去的狀態(tài)”這樣的概念，額外再抽象一些能力，比如：

1. 可以是什么類(lèi)型，不局限于boolean，并可以指定初始值。
2. 可以設(shè)定默認(rèn)的持續(xù)時(shí)間。
3. 可以在每一次修改狀態(tài)時(shí)，指定一個(gè)臨時(shí)的持續(xù)時(shí)間。
4. 允許在持續(xù)過(guò)程中手動(dòng)設(shè)置回默認(rèn)值。

總結(jié)

從一個(gè)簡(jiǎn)單的復(fù)制按鈕的交互開(kāi)始，在這一篇中重點(diǎn)講解了如何使用狀態(tài)+定時(shí)器的組合來(lái)實(shí)現(xiàn)一個(gè)過(guò)渡式的狀態(tài)，并讓狀態(tài)自動(dòng)返回初始值，其中的要點(diǎn)有：

1. 與渲染無(wú)關(guān)的數(shù)據(jù)可以使用useRef存儲(chǔ)，不需要useState管理狀態(tài)。
2. 可以使用命令式或useEffect的方式管理定時(shí)器，但往往使用useEffect更為方便，也能照顧到組件銷(xiāo)毀時(shí)的情況。
3. 對(duì)于不希望引發(fā)useEffect的數(shù)據(jù)，可以使用useRef管理形成一種“作弊”騙過(guò)eslint，同時(shí)確保能在useEffect的閉包中取到最新的值。

這個(gè)hook可用在所有臨時(shí)出現(xiàn)的場(chǎng)景，包括提示信息、消息氣泡等，一定程度上配合CSS的動(dòng)畫(huà)能取得更好的效果。