项目介绍
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自定义导航栏+菜单栏组件
项目中顶部导航栏Navbar和底部菜单栏Tabbar组件均是使用react18自定义组件实现功能。
React18-Chat}
fixed
right={
<>
}
/> 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 (
{/* 返回 */}
{ isTrue(back) && (
{ backIco ? backIco : }
{backText}
)}
{left}
{/* 标题 */}
{ !search && {title} }
{/* 搜索框 */}
{ search && {search} }
{/* 右侧 */}
{right}
)
}
export default Navbar
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 (
{ tabs.map((item, index) => {
return (
handleTabs(index, item)}>
{ item.dock && }
{ item.icon && }
{ item.img && 
}
{ item.badge && {item.badge} }
{ item.dot && }
{item.title}
)
})}
)
}
export default TabbarApp.jsx主模板配置
import { HashRouter } from 'react-router-dom'
// 引入useRoutes集中式路由配置
import Router from './router'
// 引入fontSize
import '@assets/js/fontSize'
function App() {
return (
<>
)
}
export default Appreact-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 (
加载中...
)
}
// 延迟加载
const lazyload = children => {
// React 16.6 新增了组件,让你可以“等待”目标代码加载,并且可以直接指定一个加载的界面
// 懒加载的模式需要我们给他加上一层 Loading的提示加载组件
return
}
// 路由鉴权验证
const RouterAuth = ({ children }) => {
const authState = authStore()
return authState.isLogged ? (
children
) : (
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
