架构
Context
介绍
有些参数可能来自比较顶层的组件,然后在比较底层的组件使用,这时候如果在中间组件进行层层传递就会非常麻烦。react中使用上下文概念来解决这个问题。
使用 const UserContext = React.createContext(0)
来创建一个名为UserContext
的上下文,其初值为0。
然后在所要使用上下问组件的最外层嵌套一层标签
<UserContext.Provider value={{user,setUser}}>
<Router/>
</UserContext.Provider>
这样此标签下的所有组件都可以使用这个上下文。
上下文标签是可以嵌套的。当一个组件需要某个上下文的值时,他会在dom树上自下向上寻找,找到最后一次对value赋值时为止。
组件使用上下文时先对上下文进行导入import { UserContext } from "../App";
然后使用useContext
就可以使用const context = useContext(UserContext)
实战
此项目有三个角色,在每个组件中可能都会使用到当前的角色。所以可以在顶层将一个上下文的value设为{use,setUser}
,以此对角色进行状态管理,此后每次角色改变时都会触发重新渲染。
react-router
介绍
react-router通过标签的嵌套来标记路由方式。
有hashrouter
和browserrouter
两种路由方式
-
browserrouter
进行跳转的时候可以进行任意传参,但是hashrouter
不行 -
browserrouter
使用的H5的history特性,但是hashrouter
不行 -
browserrouter
部署时需要服务器进行相应支持。
综上所述,因为后端足够大佬,所以选择browserrouter
<Route path='/' element={<Index/>}>
<Route path='/t1' element={<Index/>}>
<Route path='index' element={<t1/>}></Route>
</Route>
<Route path='/t2' element={<Index/>}>
<Route path="index" element={<t2/>}></Route>
</Route>
<Route path='/t3' element={<Index/>}>
<Route path="index" element={<t3/>}></Route>
</Route>
<Route path='/t4' element={<Index/>}>
<Route path="index" element={<t4/>}></Route>
</Route>
</Route>
如上,通过<Route>
标签的嵌套就可以实现相应的路由。
注意:当在路径前写/时代表是绝对路径,否则是在父亲路径下的子路径
element表示该路径指向的组件
api
目前用到的api
有useLocation()
,用于查询当前路径。useNavigate()
,用于跳转。
另外useNavigate
的第一个参数是路径,第二个可选参数如下:
export interface NavigateOptions {
replace?: boolean;
state?: any;
preventScrollReset?: boolean;
relative?: RelativeRoutingType;
}
实战
项目路由的构建
网络请求封装
axios
使用axios进行网络通信
有中文文档,而且写的挺清楚
实战
进行一些请求拦截,错误弹窗提示。
mobx
坑