react18 vant高仿微信App界面聊天实战-原创手记-慕课网

最近一直在学习react18 hooks vite4.x 创建react仿微信聊天实例项目。
图片描述

react-chat整个hooks函数组件实现编码，实现了图文发送消息、图片/视频预览、红包/朋友圈等功能。

图片描述

使用技术

开发工具：Vscode
框架技术：react18+react-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

图片描述

项目目录

图片描述

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

项目中使用全新的react18 hooks状态管理插件zustand4.x。

/**
 * 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
        }
    )
)

行，基于react18-hooks zustand开发聊天实战项目就分享到这里了。