React-Chat移動端聊天實例|react18 hooks仿微信App聊天界面

基於react18+react-vant+zustand仿微信手機端聊天室ReactChat。

react18-chat 一款使用最新react18.x hooks、zustand搭配react-vant組件庫開發的mobile版仿微信界面聊天實例項目。實現了發送圖文消息、圖片/視頻預覽、紅包/朋友圈等功能。

技術棧

編輯器：vscode
框架技術：react18+react-dom+react-router-dom+vite4.x
UI組件庫：react-vant (有贊react移動端UI庫)
狀態管理：zustand^4.3.9
路由管理：react-router-dom^6.14.2
className混合：clsx^2.0.0
彈框組件：rcpop (基於react18 hooks自定義手機端彈框組件)
樣式處理：sass^1.64.1

項目結構

使用vscode開發工具，整個項目採用react18 hooks函數組件編碼開發。

如果對react18 hooks開發自定義彈框組件感興趣，可以去看看這篇分享文章。

https://www.cnblogs.com/xiaoyan2017/p/17592708.html

整個項目使用到的彈窗組件均是rcpop自定義彈窗組件實現功能，支持多種彈窗類型/動畫效果及20+參數配置。

React18 Hooks自定義導航欄Navbar+菜單欄Tabbar

項目中頂部navbar及底部tabbar組件均是基於react18自定義組件實現功能。

在components目錄下新建navbar和tabbar組件目錄。

<Navbar
    back={false}
    bgcolor="linear-gradient(to right, #139fcc, #bc8bfd)"
    title={<span className="ff-gg">React18-Chat</span>}
    fixed
    right={
        <>
            <i className="iconfont ve-icon-search"></i>
            <i className="iconfont ve-icon-plus-circle-o ml-30"></i>
        </>
    }
/>

<Tabbar bgcolor="#fefefe" onClick={handleTabClick} />

主入口main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './style.scss'

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

主模板App.jsx配置

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

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

// 引入fontSize
import '@assets/js/fontSize'

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

export default App

react-router-dom路由管理配置

使用最新版react-router-dom v6進行路由管理。

/**
 * react路由配置管理 by YXY Q：282310962
*/

import { lazy, Suspense } from 'react'
import { useRoutes, Outlet, Navigate } from 'react-router-dom'
import { Loading } from 'react-vant'

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 Chat = lazy(() => import('@views/chat/chat'))
const ChatInfo = lazy(() => import('@views/chat/info'))
const RedPacket = lazy(() => import('@views/chat/redpacket'))
const My = lazy(() => import('@views/my'))
const Fzone = lazy(() => import('@views/my/fzone'))
const Wallet = lazy(() => import('@views/my/wallet'))
const Setting = lazy(() => import('@views/my/setting'))
const Error = lazy(() => import('@views/404'))

// 加載提示
const SpinLoading = () => {
  return (
    <div className="rc__spinLoading">
      <Loading size="20" color="#087ea4" vertical textColor="#999">加載中...</Loading>
    </div>
  )
}

// 延遲加載
const lazyload = children => {
  // React 16.6 新增了<Suspense>組件,讓你可以“等待”目標代碼加載,並且可以直接指定一個加載的界面
  // 懶加載的模式需要我們給他加上一層 Loading的提示加載組件
  return <Suspense fallback={<SpinLoading />}>{children}</Suspense>
}

// 路由鑑權驗證
const RouterAuth = ({ children }) => {
  const authState = authStore()

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

// 路由佔位模板(類似vue中router-view)
const RouterLayout = () => {
  return (
    <div className="rc__container flexbox flex-col">
      <Outlet />
    </div>
  )
}

// useRoutes集中式路由配置
export const routerConfig = [
  {
    path: '/',
    element: lazyload(<RouterAuth><RouterLayout /></RouterAuth>),
    children: [
      // 首頁
      // { path: '/', element: <Index /> },
      { index: true, element: <Index /> },

      // 通訊錄模塊
      // { path: '/contact', element: lazyload(<Contact />) },
      { path: '/contact', element: <Contact /> },
      { path: '/uinfo', element: <Uinfo /> },

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

      // 我的模塊
      { path: '/my', element: <My /> },
      { path: '/fzone', element: <Fzone /> },
      { path: '/wallet', element: <Wallet /> },
      { path: '/setting', element: <Setting /> },

      // 404模塊 path="*"不能省略
      { path: '*', element: <Error /> }
    ]
  },
  // 登錄/註冊
  { path: '/login', element: <Login /> },
  { path: '/register', element: <Register /> }
]

const Router = () => useRoutes(routerConfig)

export default Router

react18狀態管理Zustand

以往都是react搭配redux、react-redux進行狀態管理，這次則改爲使用輕量級zustand，非常靈活小巧的一款react狀態管理插件，支持本地持久化存儲。使用語法上有些類似vue3狀態管理插件Pinia。

/**
 * Zustand狀態管理，配合persist本地持久化存儲
*/
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

export const authStore = create(
    persist(
        (set, get) => ({
            isLogged: false,
            token: null,
            loggedData: (data) => set({isLogged: data.isLogged, token: data.token})
        }),
        {
            name: 'authState',
            // name: 'auth-store', // name of the item in the storage (must be unique)
            // storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
        }
    )
)

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

function auth() {
    const authState = authStore()
    authState.xxx

    ...
}

這樣會在本地存儲有authState記錄了。

React-Chat聊天模塊功能

聊天編輯框支持在光標處插入表情，多行文本輸入等功能。

<div
    {...rest}
    ref={editorRef}
    className={clsx('editor', className)}
    contentEditable
    onClick={handleClick}
    onInput={handleInput}
    onFocus={handleFocus}
    onBlur={handleBlur}
    style={{'userSelect': 'none', 'WebkitUserSelect': 'none'}}
>
</div>

解決了react18 hooks輸入框每次輸入光標就會跳回到首位的問題。

/**
 * 編輯器模板
*/
import { useRef, useState, useEffect, forwardRef, useImperativeHandle } from 'react'
import clsx from 'clsx'

const Editor = forwardRef((props, ref) => {
    const {
        // 編輯器值
        value = '',

        // 事件
        onClick = () => {},
        onFocus = () => {},
        onBlur = () => {},
        onChange = () => {},

        className,
        ...rest
    } = props

    const [editorText, setEditorText] = useState(value)
    const editorRef = useRef(null)

    const isChange = useRef(true)
    // 記錄光標位置
    const lastCursor = useRef(null)

    // 獲取光標最後位置
    const getLastCursor = () => {
        let sel = window.getSelection()
        if(sel && sel.rangeCount > 0) {
            return sel.getRangeAt(0)
        }
    }

    const handleInput = () => {
        setEditorText(editorRef.current.innerHTML)

        lastCursor.current = getLastCursor()
    }
    
    // 點擊編輯器
    const handleClick = () => {
        onClick?.()

        lastCursor.current = getLastCursor()
    }
    // 獲取焦點
    const handleFocus = () => {
        isChange.current = false
        onFocus?.()

        lastCursor.current = getLastCursor()
    }
    // 失去焦點
    const handleBlur = () => {
        isChange.current = true
        onBlur?.()
    }

    // 刪除內容
    const handleDel = () => {
        let range
        let sel = window.getSelection()
        if(lastCursor.current) {
            sel.removeAllRanges()
            sel.addRange(lastCursor.current)
        }
        range = getLastCursor()
        range.collapse(false)
        document.execCommand('delete')

        // 刪除表情時禁止輸入法
        setTimeout(() => { editorRef.current.blur() }, 0);
    }
    // 清空編輯器
    const handleClear = () => {
        editorRef.current.innerHTML = ''
    }

    // 光標處插入內容 @param html 需要插入的內容
    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)
        }
    }

    useEffect(() => {
        if(isChange.current) {
            setEditorText(value)
        }
    }, [value])

    useEffect(() => {
        onChange?.(editorText)
    }, [editorText])

    // 暴露指定的方法給父組件調用
    useImperativeHandle(ref, () => ({
        insertHtmlAtCursor,
        handleDel,
        handleClear
    }))

    return (
        ...
    )
})

export default Editor

OK，以上就是react18 hooks開發移動端聊天室的一些分享，希望對大家有所幫助哈~~

最後附上兩個最新實戰項目案例

tauri-admin通用後臺管理系統：https://www.cnblogs.com/xiaoyan2017/p/17552562.html

uni-chatgpt跨端仿製ChatGPT會話：https://www.cnblogs.com/xiaoyan2017/p/17507581.html

React-Chat移動端聊天實例|react18 hooks仿微信App聊天界面

技術棧

項目結構

React18 Hooks自定義導航欄Navbar+菜單欄Tabbar

主入口main.jsx

主模板App.jsx配置

react-router-dom路由管理配置

react18狀態管理Zustand

React-Chat聊天模塊功能

flutter3-weos手機OS系統|Flutter3.22+Getx仿ios桌面管理OA應用

uniapp-vue3-oadmin手機後臺實例|vite5.x+uniapp多端仿ios管理系統

基於uniapp+vue3自定義增強版table表格組件「兼容H5+小程序+App端」

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天語音/朋友圈

flutter3-macOS桌面端os系統|flutter3.x+window_manager仿mac桌面管理

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結