我的项目介绍
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 TabbarApp.jsx主模板配置
import { HashRouter } from 'react-router-dom'// 引入useRoutes集中式路由配置import Router from './router'// 引入fontSizeimport '@assets/js/fontSize'function App() { return ( <> <HashRouter> <Router /> </HashRouter> </> )}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 ( <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 Routerreact18状态治理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