如何使用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>

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

相关推荐
li理7 小时前
鸿蒙相机开发入门篇(官方实践版)
前端
webxin6667 小时前
页面动画和延迟加载动画的实现
前端·javascript
逛逛GitHub8 小时前
这个牛逼的股票市场平台,在 GitHub 上开源了。
前端·github
细节控菜鸡8 小时前
【排查实录】Web 页面能打开,服务器能通接口,客户端却访问失败?原因全在这!
运维·服务器·前端
duandashuaige8 小时前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
今天头发还在吗8 小时前
React + Ant Design 日期选择器避免显示“Invalid Date“的解决方案
前端·react.js·前端框架·ant design
时雨__9 小时前
利用AndVX6开发流程图——问题总结
前端
渣哥9 小时前
当容器里有多个 Bean,@Qualifier 如何精准定位?
javascript·后端·面试
云枫晖9 小时前
深入浅出npm:现代JavaScript项目基石
前端·javascript·node.js