react18 hooks网页端聊天实例|React+Arco Design仿微信聊天react-webchat。
![](https://img-community.csdnimg.cn/images/cdb505f6090245f2aec86bc90d85a430.jpg)
https://blog.csdn.net/yanxinyun1990/article/details/132825719
技术栈
- 编辑器: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自定义美化系统滚动条)
- 预处理样式:sass^1.66.1
![](https://img-community.csdnimg.cn/images/23139a7f9f05462dab82e7101f66fb8c.gif)
![](https://img-community.csdnimg.cn/images/6b34ab113a09407387b7544e67e1972b.gif)
项目结构
![](https://img-community.csdnimg.cn/images/d963db6d462a40fcbceef0be2c2c3be8.jpg)
采用vite4构建工具创建react18聊天项目,全部采用hooks规范编码。
![](https://img-community.csdnimg.cn/images/e951b6707d144ad7a92e6451aeda9576.jpg)
![](https://img-community.csdnimg.cn/images/f140c7bbdd134525bdd5d4600a52eb2c.jpg)
![](https://img-community.csdnimg.cn/images/b030e1284d4a41cf9249f0822f968630.jpg)
![](https://img-community.csdnimg.cn/images/c5d695d3239f406199fadc2dabfc0334.jpg)
![](https://img-community.csdnimg.cn/images/e179fe6b275b475cb14443d5f82cadb5.jpg)
![](https://img-community.csdnimg.cn/images/e64558bc6b524739b22a095db05e26e0.jpg)
![](https://img-community.csdnimg.cn/images/1c12c04acab342f3bf157598c37fc26f.jpg)
Okey,以上就是react18 hooks开发网页聊天的一些分享,希望能喜欢哈!