自然卷Harry

![对比.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2646f9901471465f8a86a3382a...

下图方便大家放大查看----------------------------------------------------------------------------...

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

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

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

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

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

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

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

分类 受控组件 非受控组件 受控组件 值存储在state中，只能通过setState来修改 常见受控组件：Input、Testarea、Select 适合复杂交互 好处：组...

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

React组件在页面上的阶段 生命周期图示 componentDidMount的使用场景 在组件挂载后-插入DOM树中立即调用 依赖于DOM节点的初始化应该放在这里 网络请...

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

同步 异步 上文来源 图片来源 异步场景 定时任务：setTimeout， setInterval 网络请求：前端向后台请求API数据，图片加载 事件监听：addEvent...

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

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

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

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

组件测试 VS. 单元测试 测试目标 组件测试：测试DOM元素是否被渲染（不含样式） 单元测试：测试用户事件，与页面元素的交互 例子 组件测试： 测试Hello组件 Arr...

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