一、我的项目介绍
react18聊天我的项目ReactChat 基于vite4+react18+acro design+zustand等技术架构实现开发仿微信电脑端界面聊天实例。反对图文混排、图片/视频预览、红包/朋友圈等性能。
二、编码技术
- 编辑器：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 hooks自定义丑化滚动条)
- 预处理款式：sass^1.66.1
三、我的项目构造目录
整个我的项目采纳react18 hooks标准编码开发页面。
react18自定义弹窗/滚动条组件
我的项目中利用到的对话框及滚动条插件均是基于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 Appreact-router v6配置
// 路由占位模板(相似vue中router-view)const RouterLayout = () => { const authState = authStore() return ( <div className="rc__container flexbox flex-alignc flex-justifyc" style={{'--themeSkin': authState.skin}}> <div className="rc__layout flexbox flex-col"> {/* <div className="rc__layout-header">顶部栏</div> */} <div className="rc__layout-body flex1 flexbox"> {/* 菜单栏 */} <Menu /> {/* 两头栏 */} <Aside /> {/* 主内容区 */} <div className="rc__layout-main flex1 flexbox flex-col"> { lazyload(<Outlet />) } </div> </div> </div> </div> )}残缺的配置文件
/** * 路由配置 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 Routerzustand新一代react18 hooks状态治理库
反对react18 hooks格调的状态治理库zustand。在用法上有些相似vue3 pinia语法。
// NPMnpm install zustand// Yarnyarn add zustand/** * 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' } ))如上图：聊天编辑框反对多行文本、光标处插入表情等性能。
return ( <div {...rest} ref={editorRef} className={clsx('editor', className)} contentEditable onClick={handleClick} onInput={handleInput} onFocus={handleFocus} onBlur={handleBlur} style={{'userSelect': 'text', 'WebkitUserSelect': 'text'}} />)在光标中央插入指定内容。
const insertHtmlAtCursor = (html) => { let sel, range if(!editorRef.current.childNodes.length) { editorRef.current.focus() } if(window.getSelection) { // IE9及其它浏览器 sel = window.getSelection() // ##留神：判断最初光标地位 if(lastCursor.current) { sel.removeAllRanges() sel.addRange(lastCursor.current) } if(sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0) range.deleteContents() let el = document.createElement('div') el.appendChild(html) var frag = document.createDocumentFragment(), node, lastNode while ((node = el.firstChild)) { lastNode = frag.appendChild(node) } range.insertNode(frag) if(lastNode) { range = range.cloneRange() range.setStartAfter(lastNode) range.collapse(true) sel.removeAllRanges() sel.addRange(range) } } } else if(document.selection && document.selection.type != 'Control') { // IE < 9 document.selection.createRange().pasteHTML(html) } // 执行输出操作 handleInput()}基于react18+zustand开发网页聊天性能就分享到这里，心愿能喜爱！
https://segmentfault.com/a/1190000043667464
https://segmentfault.com/a/1190000043942666