react项目实战

架构

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

坑