#秋日生活打卡季#

今天给大家分享一个最新研发的react18仿微信桌面端聊天实例react18-webchat。

技术栈

• 编辑器：vscode
• 技术栈：react18+vite4+react-router-dom+zustand+sass
• 组件库：@arco-design/web-react (字节跳动react组件库)
• 状态管理：zustand^4.4.1
• 路由管理：react-router-dom^6.15.0
• className拼合：clsx^2.0.0
• 对话框组件：rdialog (基于react18 hooks自定义桌面端弹窗组件)
• 滚动条组件：rscroll (基于react18自定义虚拟滚动条组件)

react-webchat全部采用react18 hooks规范编码开发。

项目结构

项目整体布局分为侧边菜单栏+中间栏+右侧内容区三个大模块。

项目中使用到的弹窗及滚动条组件都是基于react18 hooks自定义组件实现功能。

// 引入弹窗组件
import RDialog, { rdialog } from '@/components/rdialog'

// 组件式调用
<RDialog
    visible={confirmVisible}
    title="标题信息"
    content="对话框内容信息"
    closeable
    shadeClose={false}
    zIndex="2050"
    dragOut
    maxmin
    btns={[
        {text: '取消', click: () => setConfirmVisible(false)},
        {text: '确定', click: handleInfo}
    ]}
    onClose={()=>setConfirmVisible(false)}
/>

// 函数式调用
rdialog({
    title: '标题信息',
    content: '对话框内容信息',
    closeable: true,
    shadeClose: false,
    zIndex: 2050,
    dragOut: true,
    maxmin: true,
    btns: [
        {text: '取消', click: rdialog.close()},
        {text: '确定', click: handleInfo}
    ]
})

// 引入滚动条组件
import RScroll from '@/components/rscroll'

<RScroll autohide maxHeight={100}>
    包裹需要滚动的内容块。。。
</RScroll>

main.jsx入口配置

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'
import './style.scss'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

App.jsx模板文件

import { HashRouter } from 'react-router-dom'

// 引入useRoutes集中式路由配置文件
import Router from './router'

function App() {
    return (
        <>
            <HashRouter>
              <Router />
            </HashRouter>
        </>
    )
}

export default App

react18 路由配置react-router v6

/**
 * 路由配置 by YXY Q：282310962
*/

import { lazy, Suspense } from 'react'
import { useRoutes, Outlet, Navigate } from 'react-router-dom'
import { Spin } from '@arco-design/web-react'

import { authStore } from '@/store/auth'

// 引入路由页面
import Login from '@views/auth/login'
import Register from '@views/auth/register'
const Index = lazy(() => import('@views/index'))
const Contact = lazy(() => import('@views/contact'))
const Uinfo = lazy(() => import('@views/contact/uinfo'))
const NewFriend = lazy(() => import('@views/contact/newfriend'))
const Chat = lazy(() => import('@views/chat/chat'))
const ChatInfo = lazy(() => import('@views/chat/info'))
const RedPacket = lazy(() => import('@views/chat/redpacket'))
const Fzone = lazy(() => import('@views/my/fzone'))
const Favorite = lazy(() => import('@views/my/favorite'))
const Setting = lazy(() => import('@views/my/setting'))
const Error = lazy(() => import('@views/404'))

import Menu from '@/layouts/menu'
import Aside from '@/layouts/aside'

// 加载提示
const SpinLoading = () => {
    return (
        <div className="rcLoading">
            <Spin size="20" tip='loading...' />
        </div>
    )
}

// 延迟加载
const lazyload = children => {
    // React 16.6 新增了<Suspense>组件,让你可以“等待”目标代码加载,并且可以直接指定一个加载的界面，让它在用户等待的时候显示
    // 路由懒加载报错：react-dom.development.js:19055 Uncaught Error: A component suspended while responding to synchronous input.
    // 懒加载的模式需要我们给他加上一层 Loading的提示加载组件
    return <Suspense fallback={<SpinLoading />}>{children}</Suspense>
}

// 路由鉴权验证
const RouterAuth = ({ children }) => {
    const authState = authStore()

    return authState.isLogged ? (
        children
    ) : (
        <Navigate to="/login" replace={true} />
    )
}

export const routerConfig = [
    {
        path: '/',
        element: <RouterAuth><RouterLayout /></RouterAuth>,
        children: [
            // 首页
            { index: true, element: <Index /> },

            // 通讯录模块
            { path: '/contact', element: <Contact /> },
            { path: '/uinfo', element: <Uinfo /> },
            { path: '/newfriend', element: <NewFriend /> },

            // 聊天模块
            { path: '/chat', element: <Chat /> },
            { path: '/chatinfo', element: <ChatInfo /> },
            { path: '/redpacket', element: <RedPacket /> },

            // 我的模块
            { path: '/fzone', element: <Fzone /> },
            { path: '/favorite', element: <Favorite /> },
            { path: '/setting', element: <Setting /> },

            // 404模块 path="*"不能省略
            { path: '*', element: <Error /> }
        ]
    },
    // 登录/注册
    { path: '/login', element: <Login /> },
    { path: '/register', element: <Register /> }
]

const Router = () => useRoutes(routerConfig)

export default Router

zustand：新一代react18状态管理库

// NPM
npm install zustand

// Yarn
yarn add zustand

zustand支持react18 hooks，易于上手，语法有些类似vue3 pinia状态管理。

/**
 * react18状态管理库Zustand
*/
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

export const authStore = create(
    persist(
        (set, get) => ({
            isLogged: false,
            token: null,
            // 折叠侧边栏
            collapse: false,
            // 个性换肤
            skin: null,
            // 登录数据
            loggedData: (data) => set({isLogged: data.isLogged, token: data.token}),
            setCollapse: (v) => set({collapse: v}),
            setSkin: (v) => set({skin: v})
        }),
        {
            name: 'authState',
            // name: 'auth-store', // name of the item in the storage (must be unique)
            // storage: createJSONStorage(() => sessionStorage), // by default, 'localStorage'
        }
    )
)

ok，以上就是react18+arco开发网页聊天的一些分享知识，希望对大家有所帮助哈~