面试题答案
一键面试渲染流程
- React Native/Vue：通常基于JavaScript引擎与原生渲染桥接。React Native通过JavaScript将虚拟DOM计算好后，通过桥接传递给原生模块进行渲染；Vue类似，先在JavaScript层进行数据响应式处理和虚拟DOM操作，再映射到真实DOM。这中间涉及JavaScript与原生代码的频繁通信，会有一定性能损耗。
- Flutter：Flutter采用自绘引擎Skia，直接在底层C++实现渲染。从Widget构建到最终渲染，无需与原生进行频繁通信。其流程为Widget构建出Element树，然后经过布局（Layout）、绘制（Paint）阶段，直接由Skia绘制到屏幕，渲染流程更加简洁高效。例如，在频繁更新UI的场景下，如实时聊天消息滚动，Flutter无需等待JavaScript与原生通信，能快速响应更新，而React Native可能因桥接通信延迟出现短暂卡顿。
分层策略
- React Native/Vue：在Web环境下，分层依赖浏览器的合成层机制；在React Native原生渲染时，依赖原生平台（如iOS的CALayer或Android的View层级）进行分层管理。这些分层策略依赖平台自身能力，灵活性相对受限。
- Flutter：Flutter有自己独立的分层策略。通过Scene和Layer概念进行管理，开发者可以通过
Stack等Widget灵活控制不同层的显示顺序和透明度等。例如，在实现一个地图应用，地图为底层，上面覆盖一些标记和操作按钮，Flutter可以轻松通过分层管理使地图高效渲染的同时，灵活处理上层标记和按钮的交互，而React Native在不同平台上实现类似分层可能因平台差异需要更多适配工作。
绘制方式
- React Native/Vue：Web端基于CSS样式绘制，React Native原生端依赖原生绘图API（如iOS的Core Graphics或Android的Canvas）。绘制操作在JavaScript计算虚拟DOM后触发，且绘制颗粒度相对较粗。
- Flutter：使用Skia图形引擎直接绘制，Skia提供了丰富的2D图形绘制能力。Flutter的绘制是基于Widgets的，每个Widget都有自己的绘制逻辑。例如绘制一个自定义图形，Flutter可以直接利用Skia的路径绘制等功能在Widget的
paint方法中实现，而React Native若要绘制复杂自定义图形，需在原生层编写更多代码实现。
对性能影响
- 性能提升：由于Flutter直接在底层渲染，减少了JavaScript与原生通信开销，在复杂UI交互场景下，性能表现更优。例如动画场景，Flutter能更流畅地执行动画，而React Native可能因通信延迟导致动画卡顿。
- 资源占用：Flutter的自绘机制虽然高效，但可能在初始启动时，由于需要加载Skia引擎等资源，启动时间相对较长。相比之下，React Native/Vue在Web端启动较快，在原生端若复用原生资源启动也有一定优势。
对开发体验影响
- 开发效率：Flutter的声明式UI与统一的开发模式，使开发者可以在一个代码库中编写跨平台应用，减少了不同平台代码的适配工作。例如开发一个简单的按钮，Flutter代码简洁直观；而React Native可能需要针对不同平台编写不同样式代码。
- 学习成本：Flutter的渲染机制及相关概念相对新颖，对于习惯传统Web或原生开发的开发者，学习成本较高。React Native/Vue基于JavaScript和Web开发理念，对前端开发者友好，学习成本较低。