关于react.js:基于react18reactvant仿微信聊天IM实例

我的项目介绍

react-chat 基于最新版 react18.x hooks 及react-vant挪动端 UI 组件库实现仿造微信 App 聊天实例。

技术框架

• 开发工具：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

我的项目构造

整个我的项目采纳 react18 hooks 函数组件实现页面编码。

react18 自定义挪动端弹窗组件 RcPop

rcpop 基于 react18 hook 自定义多功能弹框组件。整合了 msg/alert/dialog/toast 及 android/ios 弹窗成果。反对组件式 + 函数式调用形式。

大家感兴趣，能够去看看这篇分享文章。

基于 React18 Hooks 实现挪动端弹框组件 RcPop

react18 hooks 自定义导航栏 + 菜单栏组件

我的项目中顶部导航栏 Navbar 和底部菜单栏 Tabbar 组件均是应用 react18 自定义组件实现性能。

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

navbar.jsx 模板

function Navbar(props) {
    const {
        // 是否显示返回键
        back = true,
        // 自定义返回图标
        backIco,
        // 自定义返回文字
        backText,
        // 题目
        title,
        // 搜寻区
        search,
        // 左侧自定义区
        left,
        // 右侧自定义区
        right,
        // 题目色彩
        color = '#fff',
        // 背景色
        bgcolor = '#139fcc',
        // 题目是否居中
        center,
        // 是否固定
        fixed,
        // 背景镂空通明
        transparent,
        // 层叠
        zIndex = 2023,

        className,
        ...rest
    } = props

    const handleBack = () => {window.history.back()
    }

    return (<div {...rest} className={clsx('rc__navbar', className, {'fixed': fixed, 'transparent fixed': transparent})}>
            <div className="rc__navbar-wrap flexbox flex-alignc" style={{'background': bgcolor, 'color': color, 'zIndex': zIndex}}>
                {/* 返回 */}
                {isTrue(back) && (<div className="action rc__navbar-action__left" onClick={handleBack}>
                        {backIco ? backIco : <i className="iconfont ve-icon-left"></i>}
                        {backText}
                    </div>
                )}
                {left}

                {/* 题目 */}
                {!search && <div className={clsx('rc__navbar-title', {'center': center})}>{title}</div> }

                {/* 搜寻框 */}
                {search && <div className="action rc__navbar-action__search">{search}</div> }

                {/* 右侧 */}
                <div className="action rc__navbar-action__right">{right}</div>
            </div>
        </div>
    )
}

export default Navbar

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

navbar.jsx 模板

function Tabbar(props) {
    const {
        // 以后选项
        current = 0,
        // 背景色
        bgcolor = '#fff',
        // 色彩
        color = '#999',
        // 激活色彩
        activeColor = '#139fcc',
        // 是否固定
        fixed,
        // 背景镂空通明
        transparent,
        // 层叠
        zIndex = 2023,
        // tab 选项
        tabs = [
            {
                path: '/',
                icon: 've-icon-message',
                title: '音讯',
                badge: 2
            },
            {
                path: '/contact',
                icon: 've-icon-book',
                title: '通讯录',
                // dock: true,
                // dockBg: '#f90',
                // iconSize: '24px'
            },
            {
                path: '/my',
                icon: 've-icon-user',
                title: '我的',
                dot: true
            }
        ],
        onClick = () => {},

        className,
        ...rest
    } = props

    const [tabIndex, setTabIndex] = useState(current)

    const navigate = useNavigate()
    const location = useLocation()

    useEffect(() => {const { pathname} = location
        tabs.map((item, index) => {if(item.path == pathname) {setTabIndex(index)
            }
        })
    }, [current, tabs])

    const handleTabs = (index, item) => {setTabIndex(index)
        onClick?.(index)
        if(item?.path) {navigate(item?.path)
        }
    }

    return (<div {...rest} className={clsx('rc__tabbar', className, {'fixed': fixed, 'transparent fixed': transparent})}>
            <div className="rc__tabbar-wrap flexbox flex-alignc" style={{'background': bgcolor, 'zIndex': zIndex}}>
                {tabs.map((item, index) => {
                    return (<div key={index} className={clsx('tabitem', {'on': tabIndex == index})} onClick={()=>handleTabs(index, item)}>
                            <div className={clsx('ico', {'dock': item.dock})}>
                                {item.dock && <i className="dock-bg" style={{'background': item.dockBg ? item.dockBg : activeColor}}></i> }
                                {item.icon && <i className={clsx('iconfont', item.icon)} style={{'color': (tabIndex == index && !item.dock ? activeColor : color), 'fontSize': item.iconSize}}></i> }
                                {item.img && <img className="iconimg" src={tabIndex == index && !item.dock ? item.activeImg : item.img} style={{'fontSize': item.iconSize}} /> }
                                {item.badge && <em className="rc__badge">{item.badge}</em> }
                                {item.dot && <em className="rc__badge-dot"></em>}
                            </div>
                            <div className="txt" style={{'color': (tabIndex == index ? activeColor: color)}}>{item.title}</div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

export default Tabbar

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

我的项目中应用的状态治理为 Zustand。应用语法相似 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
        }
    )
)

Ending~~ 以上就是 react18+zustand 开发挪动端聊天实例的一些分享。

https://segmentfault.com/a/1190000044012253
https://segmentfault.com/a/1190000043886272