React 17渐进升级React 17 带来的渐进升级提供了一种新方案，渐进升级的支持就是一个应用可以同时由多个 React 版本。 新的事件模型react 中所有的事件都是合成事件，实现的机制是在根节点上监听所有事件，经过 react

单元测试使用 Jest 和 React Testing Library 进行单元测试JestFacebook 推出的 js 但愿测试框架，零配置就能提供并发测试，测试覆盖率，Mock 工具，断言 API 等。 Jest 从哪里寻找测试文件

了解 Webpack通常在实际开发中我们不需要太关注源代码是通过什么编译器如何打包成最后的应用程序的，因为 IDE 已经帮我们把这些都做好了。 但是我们需要知道它的主要功能，以及能够排查问题。 Failed to compile：编译阶段

控制整个应用的大小，提高加载性能是前端开发需要的挑战。 提高首屏加载速度： 对应用分包 采用高效的缓存策略 实现按需加载使用 import 语句，定义按需加载的起始模块本质在于，需要有动态加载模块的能力——import（ECMA S

在开发中遇到了一个需求：在 url 内输入页面上的按钮 label 就可以触发按钮的点击事件。 此时就需要用文本内容来定位页面上的DOM元素。 1. 遍历法遍历页面上所有的相关元素。 Array.from(document.queryS

浮动层的使用通常的对话框使用： 对话框需要在父组件中声明，才能在子组件中控制是否显示。 给对话框传递参数智能由 props 传入，意味着所有状态管理需要在更高级别的组件上。 处理对话框的误区当这里是一个左右分栏布局的页面，在左侧的菜单栏

在表单中使用 React 组件：受控组件和非受控组件非受控组件：表单元素的值不是由副组件决定的，是完全内部的状态 通过非受控组件的方式，可以避免某些程度上的组件重复渲染导致的性能问题，但是无法对外有交互。 使用 Hooks 简化表单处理维护

在实际开发中，关键在于：每增加一个新的功能，整个应用程序的复杂度不应该明显上升，这样才能保证应用程序始终可扩展，可维护。 软件复杂度的根源：复杂的依赖关系按领域组织文件夹结构通常在开发中会从技术角度对文件夹进行拆分，而不是按照业务功能组织在

props 是组件之间通信的基础。 在 React 中使用原生事件React 原生事件的原理：合成事件由于虚拟 DOM 的存在，在 React 中即使绑定一个事件到原生的 DOM 节点，事件也并不是绑定在对应的节点上，而是所有的事件都是绑定

函数组件设计模式保证状态的唯一数据源，语义化的拆分复杂组件都是一些设计模式。 容器模式：实现按条件执行 Hooks注意点：Hooks 必须在顶层作用域调用（因为 React 需要在函数组件内部维护所用到的 Hooks 的状态）。 比如有一个