### 前言前些日子在做项目的时候，需要封装一个`Toast`组件。我想起之前用过的库，只要在入口文件中引入就可以在全局中使用，还是很方便的，借这次机会也来实现一下。说起来也算是`forwardRef`、`useImperativeHanle`和`useContext`的实际使用。 - 第一种，使用`forwardRef`和`useImperativeHanle` 一个是像`react-toastify`库一样使用，在入口处放置`ToastContainer`，然后在代码中任意地方使用`toast("Wow so easy!")`都有提示 ```tsx import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; function App(){ const notify = () => toast("Wow so easy!"); return (

); } ``` - 第二种，使用`useContext` 在入口处放置`ToastProvider`，然后在代码中任意地方使用` const { show } = useToast()`都有提示。忘记什么库了。文中就用`antd`的`message`来模拟一下我们自己写的`Toast`组件。 ### 正文我们先来了解一下`forwardRef`、`useImperativeHanle`和`useContext`的基本使用。 #### `forwardRef` 和 `useImperativeHandle` 的基本使用 `forwardRef` 和 `useImperativeHandle`，它们通常一起使用，以便在父组件中暴露子组件的特定方法或属性。 `forwardRef`，它允许你将父组件的` ref `转发到子组件中的某个 DOM 节点或其他 React 组件。这样，父组件就可以访问子组件的引用，并直接操作它。 `useImperativeHandle` 是一个自定义 Hook，它允许你自定义通过 `forwardRef` 暴露给父组件的 `ref` 值。你可以指定哪些`方法`或`属性`被暴露，而不是直接暴露整个 DOM 节点或组件实例。下面是一个简单的例子 ```tsx import React, { forwardRef, useImperativeHandle, useRef } from 'react'; const ChildComponent = forwardRef((props, ref) => { const inputRef = useRef(null); useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); }, })); return ; }); const ParentComponent = () => { const childRef = useRef(null); const handleClick = () => { childRef.current.focus(); }; return (

); }; export default ParentComponent; ``` #### 使用`forwardRef`和`useImperativeHanle`封装全局Toast 封装组件 ```tsx import React, { createRef, forwardRef, useImperativeHandle } from 'react'; import { Button, message } from 'antd'; const Toast = forwardRef((props, ref) => { const [messageApi, contextHolder] = message.useMessage(); useImperativeHandle(ref, () => ({ show: (msg: string) => { messageApi.info(msg); } })); return <> {contextHolder} }) const ToastRef = createRef<{ show: (msg: string) => {} }>(); export const ToastContain = () => { return } export const showToast = (msg: string) => { if (ToastRef.current) { ToastRef.current.show(msg) } }; ``` 在入口中引入 ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import router from '@/router/index' import reportWebVitals from './reportWebVitals'; import { RouterProvider } from 'react-router-dom'; import ErrorBoundary from './ErrorBoundary'; import { ToastContain } from './components/Toast'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( 准备中} /> ); reportWebVitals(); ``` 然后就可以在全局中使用 `showToast`方法了 ```tsx import React from 'react'; import { showToast } from '../../../components/Toast'; export default function Index() { return <>

{ showToast('sadasds') }} > 提示弹窗

} ``` #### `useContext`的基本使用 `useContext`用于访问组件树中某个层级上定义的 `Context`。`Context` 提供了一种在组件之间共享值的方式，而不必通过组件树的每个层级显式传递` props`。 1. **创建 Context** 首先，你需要创建一个 `Context` 对象。这可以通过调用 `React.createContext` 来完成。你还可以为默认值提供一个参数，如果 `Context` 的 `Provider` 没有在组件树中找到，将使用这个默认值。 ```tsx import React from 'react'; const MyContext = React.createContext('defaultValue'); ``` 2. **提供 Context** 你需要在组件树中的某个地方提供这个 `Context`。这通常在组件的顶层完成，通过使用 `MyContext.Provider`组件，并传递一个 `value` prop ```tsx import React from 'react'; import MyComponent from './MyComponent'; import { MyContext } from './MyContext'; function App() { return ( ); } export default App; ``` 3. **使用 `useContext`** 在需要访问 `Context` 的组件中，你可以使用 `useContext` Hook 来获取 `Context` 的当前值 ```tsx import React, { useContext } from 'react'; import { MyContext } from './MyContext'; function MyComponent() { const contextValue = useContext(MyContext); return

Context value: {contextValue}

; } export default MyComponent; ``` #### 使用`useContext`来封装全局Toast 封装组件 ```tsx import React, { createContext, useCallback, useContext, useState } from 'react'; import { Button, message } from 'antd'; const ToastContext = createContext(null); export const ToastProvider = ({ children }: any) => { const [messageApi, contextHolder] = message.useMessage(); const show = useCallback((msg: string) => { messageApi.info(msg); }, [messageApi]); return ( {children} {contextHolder} ); }; export const useToast = () => { const context = useContext(ToastContext); return context; }; ``` 在入口处使用 ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import router from '@/router/index' import reportWebVitals from './reportWebVitals'; import { RouterProvider } from 'react-router-dom'; import ErrorBoundary from './ErrorBoundary'; import { ToastProvider } from './components/ToastOne'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( 准备中} /> ); ``` 然后就可以通过`useToast`在全局中使用了 ```tsx import React from 'react'; import { useToast } from '../../../components/ToastOne'; export default function Index() { const { show } = useToast() return <>

{ show('guiyu') }} > 点击提示

} ``` ### 结尾感兴趣的可以去试试代码仓库地址：[function-realization: 实现一些有趣的功能 (gitee.com)](https://gitee.com/lin-zhiteng/function-realization)