阶段性总结

实现的案例：TodoList、Router-demo、Test-list

 

TodoList使用的知识

 

一、React和React-Hook

 

1.组件传值

组件传值就是将父组件中存在的方法传递给子组件，子组件将参数传回给父组件用来执行父组件中的方法；具体可以使用props和解构赋值的方法进行方法的传递

 

2.useState

它的底层实现原理是闭包；需要传入一个参数作为状态的初始值，这个初始值可以是一个值也可以是一个function，当函数执行后会返回两个值，一个是当前状态的属性，一个是修改状态的方法；最核心就是通过setState函数来更新state

 

3.useContext

以前的组件传值想要传输方法是需要通过props一层一层的进行传递，useContext将所有的方法写在一个文件中，通过value属性将方法暴露，谁需要就通过useContext在文件中声明一下就可以了

 

4.useReducer

可以代替useState，他的reducer的写法是switch…case，通过不同类型的判断，控制执行不同的操作最终返回state，userReducer可以像子组件传递dispatch，根据类型的不同像子组件中传递所需要的不同的数据

 

5.props和useContext的使用场景

 

1）props场景：

 

单一的父子传值

 

2）useContext场景：

 

存在多层级之间的传值，将想要传递的方法写在统一文件中，谁用谁获取

 

6.useState和useReducer的使用场景

 

1）useState场景：

 

业务逻辑在组件内就能完成、state是基础数据类型、多个state间的变化没有关系

 

2）useReducer场景：

 

state的业务逻辑比较复杂且包含多个子值、下一个state依赖于之前的state、state是一个数组或对象

 

Router-demo使用的知识

 

5.React-Router-dom v6

 

1）BrowserRouter要放在所有组件的最外面；Routes紧跟在BrowserRouter里面，所有的路由都要写在Routes里面

 

2）路由包括

 

Link 像HTML中的a标签，它只能在Router内部使用；它是通过to的参数来控制要跳转到的页面

 

NavLink 是Link的特定版本，会在匹配上当前url的时候给已经渲染的元素添加参数，可以根据不同的路由设置不同的样式，用于将样式添加到当前路由

 

编程式跳转使用useNavigate钩子函数生成navigate对象，可以通过js代码完成路由跳转

 

嵌套路由在路由文件中写成嵌套路由；在父组件中使用Outlet来显示匹配到的子组件，目的是作为子路由的出口

 

默认路由用index设置；在一个嵌套路由中，如果只匹配了父级的URL时，则Outlet中会显示带有index属性的路由

 

全匹配路由当path=“*”时，可以匹配所有的非空路径；一般用来设置404界面

 

Params路由传参在Route组件中的path属性中定义路径参数；在组件内通过useParams hook访问路径参数

 

3）路由写法

 

React-router写法分为普通写法和集中式路由写法；

 

普通写法就是将所有路由包裹在BrowserRouter和Routes里面，通过不同的API实现对路由跳转的控制

 

集中式路由就是写一个名为Router的function，使用useRoutes将所有的路由return出去，在最终的出口将路由引入就可以了；子路由的写法就是用children

 

Test-list 使用的知识

 

二、MUI框架

 

1.用到的components组件

 

1）Stack 相当于flex布局，可以设置flex布局的属性，控制页面的沿水平、垂直轴的布局

 

2）Dialog对话框 页面中的删除按钮和新建因子按钮都是通过Dialog对话框实现的，自带点击弹框的显示和关闭

 

3）Breadcrumbs面包屑可以改变面包屑中间的符号，还可以用过Link来控制跳转

 

4）Table表格主要用于整个页面的数据展示

 

5）TextField 主要用于搜索框和新建因子的弹框内部样式

 

2.用到的System系统

 

1）Box 相当于css中的div，可以设置宽高等属性

 

2）sx 使用它可以实现直接在标签上设置width、height、padding、margin等属性

 

三、fluency

 

结合了useContext和useReducer；Reducers里面的方法都是为了驱动本地state的，通过dispatcher在组件中调用fluency里面的方法；initialState用来设置数据的初始值，通过useSelector给其他页面使用

 

四、mock

 

通过mockAdapter对beatService 的 invoke 方法进行封装来实现mock，FactorService文件中的方法名和参数要与mock中的一致，在本地可以使用mock中的方法，就可以将fluency中Reducers里面的方法替换掉了。

 

需要注意的点：queryFactors中的初始值需要进行深拷贝JSON.parse(JSON.stringify(DATA))