`Reactjs`常用 `Hooks`

Reactjs常用 Hooks

1. useClippy

用来复制数据到剪切板的 hook, clipboard是剪切板中的数据, setClipboard用来向剪切板中设置数据.

import useClippy from "use-clippy"

function Component() {
    const [ clipboard, setClipboard ] = useClipy()

    return (
        <div>
            <div>Clipboard</div>
            <div>{clipboard}</div>

            <button onClick={() => setClipboard("nnamdi")}>Set Clipboard</button>
        </div>
    )
}

2. useBrowserContextCommunication

useBrowserContextCommunication使用广播通道API来提供不同浏览器上下文(选项卡、iframe、窗口)之间通信的简单解决方案。

import useBrowserContextCommunication from "react-window-communication-hook"

const [communicationState, postMessage] = useBrowserContextCommunication("politicsChannel");

// messages 往返的消息数组
// lastMessage最后一条消息
const [lastMessage, messages] = communicationState; 

postMessage('')// 发送消息

3. useScript

一个用来加载外部 javascript 代码的 Hook

import useScript from "react-script-hook"

function Component() {
    const [ loading, error ] = useScript({
        src: "analytics.google.com/api/v2/",
        onload: () => console.log("Script loaded")
    })

    if(loading) return <div>Script loading</div>
    if(error) return <div>Error occured</div>

    return (
        <div>
            ...
        </div>
    )
}

4. useLocalStorage

一个用来简化localStorage操作的 hook

npm i @rehooks/local-storage
import { useLocalStorage } from "@rehooks/local-storage"

import { useLocalStorage } from "@rehooks/local-storage"

function Component() {
    const [ name, setName, deleteName ] = useLocalStorage("name")

    return (
        <div>
            <div>Key: "name" | Value: "{name}"</div>
            <div>
                <button onClick={ ()=> setName("nnamdi")}>Set Name</button>
                <button onClick={deleteName}>Delete Value</button>
            </div>
        </div>
    )
}

5. useIdb

用来操作IndexedDB的 hook

npm i react-use-idb

import { useIdb } from "react-use-idb"

function Component() {
  // 数据存放到 IndexedDB 时,使用的 key 为 user
  // 使用setUser更新信息
    const [ user, setUser ] = useIdb("user", { name: "nnamdi", age: 27 })

    return (
        <div>
            <div> 
                User:
                <div>Name: {user.name}</div>
                <div>Age: {user.age}</div>
            </div>
            <button onClick={() => setUser({...user, age: 26})}></button>
        </div>
    )
}

6. use-mouse-action

鼠标操作 hook, 其中包含了三个 hook 函数

useMouseAction: 向指标元素注册鼠标操作监听器.

useMouseDown: 向指标元素注册鼠标按下操作监听器.

useMouseUp: 向指标元素注册鼠标放开操作监听器.

import { useMouseAction, useMouseDown, useMouseUp } from "use-mouse-action"

function Component() {
    const mouseActionProps = useMouseAction({
        onAction: () => console.log("Mouse clicked")
    })

    const mouseDownProps = useMouseDown(() => console.log("Mouse down"))

    const mouseUpProps = useMouseUp(() => console.log("Mouse up"))

    return (
        <>
            <button {...mouseActionProps}>Mouse Action</button>
            <button {...mouseDownProps}>Mouse Down</button>
            <button {...mouseUpProps}>Mouse Up</button>
        </>
    )    
}

7. useOnlineStatus

一个用来判断当前用户是否联网的hook, 利用navigator.onLine来实现的

import useOnlineStatus from "@rehooks/online-status"

function Component() {
    const online = useOnlineStatus() // true: online, false: offline

    return (
        <div>
            Network {online ? "Online" : "Offline"}
        </div>
    )
}

8. useDocumentTitle

设置文档标题的 hook

import useDocumentTitle from "@rehooks/document-title"

function Component() {
    useDocumentTitle("Component Page")

    return (
        <div>
            ...
        </div>
    )
}

9. useNetworkStatus

获取当前网络状态的hook, 底层使用navigator.connection 有以下几种网络状态

• downlink
• effectiveType (checks if the user has a slow network or not) 网络性能(快,慢)
• rtt
• saveData (A boolean value that tells if the browser is on data-saver mode) 省电模式

import useNetworkStatus from "@rehooks/network-status"

function Component() {
    const connection = useNetworkStatus()
    const { effectiveType, saveData, rtt, downlink } = connection;

    return (
        <div>
            <div>Network: {connection.effectiveType ? "Fast" : "Slow"}</div>
            <div>Data Saver Mode: {saveData ? "Yes" : "No" }</div>
        </div>
    )
}

10. useSpeechSynthesis

文字转语音 Hook

安装: npm i react-speech-kit

使用:

import { useSpeechSynthesis } from "react-speech-kit"

function Component() {
    const ref = React.useRef()
    const { speak } = useSpeechSynthesis()

    return (
        <div>
            <input type="text" ref={ref} />
            <button onClick={() => speak({text: ref.current.value})}>Speak</button>
        </div>
    )
}

11. useSpeechRecognition

语音转文字 Hook

安装npm i react-speech-kit 说明:

• listen: 开始监听麦克风输入,a function that tells the browser to listen for audio coming from the mic.
• listening: 当前状态, a boolean value that indicates the browser is listening for input in the mic.
• stop: 停止监听麦克风输入 a function that cancels listening for input coming from the mic.

使用

import { useSpeechRecognition } from "react-speech-kit"

function Component() {
    const [ result, setResult ] = useState()
    const { listen, listening, stop } = useSpeechRecognition({
        onResult: result => setResult(result)
    })

    return (
        <div>
            {listening ? "Speak, I'm listening" : ""}
            <textarea value={value} />
            <button onClick={listen}>Listen</button>
            <button onClick={stop}>Stop</button>
        </div>
    )
}

来源：oschina

链接：https://my.oschina.net/eonezhang/blog/3217933