react18-webchat网页聊天实例|React Hooks+Arco Design仿微信桌面端

React18 Hooks+Arco-Design+Zustand仿微信客户端聊天ReactWebchat。

react18-webchat基于react18+vite4.x+arco-design+zustand等技术开发的一款仿制微信网页版聊天实战项目。实现发送带有emoj消息文本、图片/视频预览、红包/朋友圈、局部模块化刷新/美化滚动条等功能。

使用技术

• 编辑器：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自定义桌面端弹窗组件)
• 预处理样式：sass^1.66.1

项目目录结构

使用vite4.x构建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}
    ]
})