01 对React的理解
概念： React是一个网页UI框架，通过组件化的方式解决视图层开发复用问题，本质是一个组件化框架。
用途： 构建用户界面，解决视图层复用问题，可用于Web、Native、VR等各种应用。
核心思路：
- 声明式： 以声明的方式描述视图，直观易懂。
- 组件化： 将界面拆分成独立可复用的组件，实现高内聚低耦合。
- 通用性： 一次学习，随处编写，支持多平台开发。
优缺点：
- 优势： 组件化、声明式、通用性，适用范围广，社区繁荣。
- 劣势： 缺乏完整解决方案，大型应用需要整合解决方案，选型和学习成本较高。
02 为什么 React 要用 JSX？
JSX概述： JSX是JavaScript的语法拓展，结构类似XML，主要用于声明React元素，是React.CreateElement的语法糖。
核心概念： JSX是React元素的声明方式，通过babel插件编译为React.CreateElement。
方案对比：
- 模版： 引入多余概念，关注点分离较差。
- 模版字符串： 描述复杂，语法提示不足。
结论： JSX简化了React元素的声明，相比其他方案更直观、简洁。
03 如何避免生命周期中的坑？
坑的出现情况：
- 在不恰当的时机使用不合适的代码。
- 忘记调用需要调用的生命周期方法。
解决思路：
- 挂载阶段： Constructor初始化，getDerivedStateFromProps处理props与state，render渲染，componentDidMount组件加载完成。
- 更新阶段： shouldComponentUpdate判断是否重新渲染，Render渲染，getSnapshotBeforeUpdate处理异步渲染前的逻辑。
- 卸载阶段： componentWillUnmount执行清理工作，解除事件绑定等。
结论： 遵循生命周期方法的正确使用时机，注意解绑事件，避免产生不必要的bug。
04 类组件与函数组件有什么区别呢？
区别：
- 设计思路： 类组件面向对象编程，函数组件是函数式编程。
- 纯粹性： 函数组件更纯粹、简单、易测试。
- 设计模式： 类组件支持继承，函数组件通过hooks提供更细粒度的逻辑组织与复用。
- 未来趋势： 函数组件是React未来的主推方向，适应hooks的发展。
结论： 函数组件在简洁性和未来发展趋势上具有优势，而类组件在设计模式上支持继承。
05 如何设计 React 组件？
设计分类：
- 展示组件： 代理组件、样式组件、布局组件，用于封装常用属性、样式、布局。
- 灵巧组件： 容器组件、高阶组件，处理数据请求、逻辑复用、链式调用等。
工程实践： 将页面和组件分别建立文件夹，再按照basic、container、hoc等目录进行划分。
结论： 通过分类和目录结构清晰组织React组件，提高可维护性和开发效率。
06 useState 是同步更新还是异步更新？
结论： useState的更新是异步的，通过isBatchingUpdates控制是否批量更新，造成了假异步的效果。
09 Virtual DOM 的工作原理是什么？
结论： Virtual DOM是一个代表DOM树结构的JavaScript对象，通过比对前后两棵Virtual DOM树的差异，然后将差异应用到实际的DOM树上，以提高性能。
10 什么是diff算法？
结论： Diff算法是指生成补丁的方式，通过比对前后两棵Virtual DOM树的差异，然后生成补丁，最后应用到实际的DOM树上，减少DOM操作的次数。
11 如何解释 React 的渲染流程？
结论： React的渲染流程分为render阶段和commit阶段，通过构造workInProgress树计算diff，然后使用requestIdleCallback调度执行每组任务（work），在commit阶段处理effect列表，包括更新DOM树、生命周期回调、ref等。
13 如何分析和调优性能瓶颈？
结论： 通过引入性能监控工具（如APM工具）进行性能分析，观察指标如TP99、成功率等，针对瓶颈进行调优。优化可以包括改善网络请求、减少DOM操作、缓存数据等手段，根据业务形态找到合适的优化方向。
17 useEffect 与 useLayoutEffect 区别在哪里？
结论： 共同点是函数签名一致，运行效果一致。区别在于useLayoutEffect同步处理副作用，适用于处理DOM调整样式，避免页面闪烁。
18 谈谈 React Hook 的设计模式
结论： 使用Hook时需要放弃原有生命周期的开发模式，以effect的角度重新思考，可以将监听和取消监听放在同一effect中，减少心智负担，更灵活地组织逻辑和实现逻辑复用。
