React

该文为阅读笔记，建议大家去看阮一峰老师的原文，若有侵权请联系删除 UI组件和容器组件 UI组件 特点 只负责展示UI，不带业务逻辑 没有状态（即不使用this.state这个变量） 所有数据都由参数（

该文为阅读笔记，建议大家去看阮一峰老师的原文，若有侵权请联系删除 中间件 为什么引入中间件？ 实现异步操作结束后自动执行Reducer 放置位置 中间件是一个函数，改造了store.dispatch方

该文为阅读笔记，建议大家去看阮一峰老师的原文，若有侵权请联系删除 为什么引入Redux？ Web 应用的完整解决方案涉及完整代码、组件间通信，这对于大型应用至关重要。而React只是DOM的抽象层，难

分类 前端路由 服务器路由 对比 路由类型 客户访问，路由 性能 前端路由 返回网页 页面刷新SEO友好 服务器路由 渲染UI视图 首屏加载慢，页面加载快 图片和解释来源 不适用React Route

包含关系 组件作为参数传递 父组件 子组件 变量作为参数传递 父组件 子组件 包含关系 组件作为参数传递 父组件 子组件 变量作为参数传递 父组件 子组件

作用 Context提供了一个无需为每层组件手动添加props，就能在组件之间进行数据传递的方法，从而避免了在每一个层级手动的传递 props 属性。 目的 共享那些对于一个组件树而言是全局的数据 应

版本 React16.8 版本中添加了 hooks 在函数组件中使用useStatus钩子去管理state 在函数组件中使用useEffect钩子去使用生命周期函数 自定义Hook用以复用不同组件之间

分类 受控组件 非受控组件 受控组件 值存储在state中，只能通过setState来修改 常见受控组件：Input、Testarea、Select 适合复杂交互 好处：组件可马上回应输入内容的改变，

findBy 适用于获取异步操作得到的elemet waitFor 验证异步之后发生变化的内容 axios / fetch 通过jest.mock与jest.fn对axios和fetch进行mock

React组件在页面上的阶段 生命周期图示 componentDidMount的使用场景 在组件挂载后-插入DOM树中立即调用 依赖于DOM节点的初始化应该放在这里 网络请求获取数据可在此处进行 适合

单元测试 单元 程序中执行某一特定任务的具有一定独立性的代码模块 单元测试 测试某一独立的代码模块的测试 依赖形如 Mock Function 设置返回值 模拟函数实现 验证函数被调用情况 声明Moc

组件树的划分原则 根据单一职责原则（SOLID之一） 根据业务逻辑的亲密关系判定组件关系 如何实现组件树 根据mockup和业务划分组件层次 采用自下而上的方式编写组件 确定当前组件的数据流 需要时对

UI = f(state) React有一套自己的状态管理机制， 组件的生命周期 三大阶段 Mounting(挂载)：已插入真实 DOM Updating(更新)：正在被重新渲染 Unmounting

常用库 @testing-library/user-event（推荐） Firing Events @testing-library/user-event @testing-library/user-

原生事件 概念 直接绑定到DOM元素上的用户事件（如点击，鼠标划过等等） 合成事件 概念 React中封装事件处理的一套机制，React合成事件一套机制：React并不是将click事件直接绑定在do

组件测试 VS. 单元测试 测试目标 组件测试：测试DOM元素是否被渲染（不含样式） 单元测试：测试用户事件，与页面元素的交互 例子 组件测试： 测试Hello组件 Arrange: 安排好多有先要条

1.单元测试是什么？ 单元: 代码模块（函数、对象、类、模块）； 测试：自动化测试替代手动测试（QA）. 2.如何测试一个单元？ AAA模式 Arrange Act Assert Test input

1.组件 1.1 分类 1.1.1 函数组件 （常用） 1.1.2 类组件 （生命周期） 1.2 样式 1.3 数据传递