如何使用react的hook实现复制粘贴操作？

第一步：新建hooks文件，并在其目录下创建一个钩子文件useClipboard.jsx

（1）引入useCallback和useState

复制代码

import {useCallback,useState} from "react";

（2）定义了一个useClipboardCopy方法内容（复制）

复制代码

// 定义一个自定义 Hook，用于将文本内容复制到剪贴板
export const useClipboardCopy = () => {
    // 使用 useCallback Hook 缓存异步函数，以便在组件重新渲染时不会重复创建
    const copyToClipboard = useCallback((text) => {
        // 如果浏览器支持 Clipboard API，则尝试将文本内容写入剪贴板
        if(navigator.clipboard){
            navigator.clipboard.writeText(text).then(() => {
                console.log("copied to clipboard");
            }).catch(error => {
                console.log("Faild to copy text to clipboard",error)
            }); 
        }else{
            // 如果浏览器不支持 Clipboard API，则在控制台输出提示信息
            console.log("clipbord API not available")
        } 
    },[])

    // 返回复制到剪贴板的异步函数 copyToClipboard
    return copyToClipboard;
}

（3）粘贴

复制代码

// 定义一个自定义 Hook，用于获取剪贴板中的文本内容
export const useClipboardPaste = () => {
    // 使用 useState Hook 创建状态变量 pastedText 和 setPastedText
    const [pastedText,setPastedText] = useState('');

    // 定义一个 useCallback Hook 来保存异步函数，以便在组件重新渲染时不会重复创建
    const pasteFromClipboard = useCallback(async() => {
        // 如果浏览器支持 Clipboard API，则尝试从剪贴板读取文本内容
        if(navigator.clipboard){
            try{
                const text = await navigator.clipboard.readText;
                // 将读取到的文本内容更新到 pastedText 状态变量中
                setPastedText(text);
            }catch(error){
                console.log("Faild to read text to clipboard",error)
            }
        }else{
            // 如果浏览器不支持 Clipboard API，则在控制台输出提示信息
            console.log("clipbord API not available")
        }
    },[])

    // 返回 pastedText 状态变量和 pasteFromClipboard 异步函数
    return [pastedText,pasteFromClipboard ]
}

usecallback的作用是什么呢？

它主要有一个回调函数和一个依赖项进行参数的处理，作用就是对这个回调函数进行缓存化的设置，在依赖项发生变化的时候，这个回调函数才会进行重新的创建，目的就是确保相同的回调函数引用，在组件渲染的时候并不会发生对应的变化，从而避免的是不必要的重新渲染操作。

那么在当前剪切板功能处理的时候，使用usecallback主要的思考点也在于性能的优化操作，因为我们在进行复制粘贴的时候，需要去考虑是不是会进行一个重新的函数构建操作。

为什么第二个参数是一个空数组，这表明回调函数是一个稳定的不依赖于任何动态值的一个函数，在这种情况下，这个回调函数在组件的生命周期内都不会发生任何的变化。

所以，react在进行复制粘贴的时候，对这两个函数内容，并不会进行重新的渲染操作，提升的就是回调函数的性能操作，防止由于新函数引入的时候导致子组件的一个额外渲染处理。

第二步：如何使用

（1）在组件中进行钩子的引入

复制代码

import { copyToClipboard,useClipboardPaste } from "./hooks/useClipboard"

(2)进行函数调用实例化操作

复制代码

const copyToClipboard = useClipboardCopy();
const [pastedText,pasteFromClipboard] = useClipboardPaste();

(3)按键的设置进行复制和粘贴的操作

复制代码

<button onClick={() => copyToClipboard('复制的文本')}>复制</button>
<button onClick={ pasteFromClipboard }>粘贴</button>
<div>粘贴板的内容：{pastedText}></div>

那么以上就是复制粘贴的操作步骤啦！！！