关于react.js:react18arco网页聊天室react-hooks高仿微信聊天

100次阅读

共计 5862 个字符，预计需要花费 15 分钟才能阅读完成。

一、我的项目介绍

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 App

react-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 Router

zustand 新一代 react18 hooks 状态治理库

反对 react18 hooks 格调的状态治理库 zustand。在用法上有些相似 vue3 pinia 语法。

// NPM
npm install zustand

// Yarn
yarn 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

正文完
react.js
发表至： react.js
2023-09-12
 0
关于react.js:react中refs和事件处理
关于react.js:百度前端必会react面试题总结
关于react.js:闲鱼直播三周内实现点击率翻倍我们是这么做到的
关于react.js:react源码解析19手写迷你版react