React Native面试题——面试题整理2

一 面试题汇总

1. RN生命周期？哪些能setState？
2. Code Push的原理是什么？
3. 有没有做过动画？
4. 极光推送有没有遇到什么问题？怎么解决的？
5. 自己有没有封装过什么组件？
6. 数据存储是怎么做的？
7. 上传图片时图片过大时应该对服务器做些什么？
8. 遇到了什么问题？怎么解决的？
9. 适配怎么做的？

二 面试题解答(仅供参考)

2.1 RN生命周期？哪些能setState？

React Native（RN）组件的生命周期包括以下几个阶段：

1. 挂载阶段（Mounting）：组件被创建并插入到DOM中。这个阶段包括以下生命周期方法：
   - `constructor()`
   - `static getDerivedStateFromProps()`
   - `render()`
   - `componentDidMount()`
2. 更新阶段（Updating）：组件重新渲染，一般由状态或属性的改变引起。这个阶段包括以下生命周期方法：
   - `static getDerivedStateFromProps()`
   - `shouldComponentUpdate()`
   - `render()`
   - `getSnapshotBeforeUpdate()`
   - `componentDidUpdate()`
3. 卸载阶段（Unmounting）：组件从DOM中移除。这个阶段包括以下生命周期方法：
   - `componentWillUnmount()`
4. 错误处理阶段（Error Handling）：组件在渲染过程中发生错误时调用。这个阶段包括以下生命周期方法：
   - `static getDerivedStateFromError()`
   - `componentDidCatch()`

在React Native中，`setState()` 方法可以在组件中用于更新状态。
可以调用 `setState()` 方法的生命周期方法包括：

- 在挂载阶段：`constructor()` 和 `componentDidMount()`
- 在更新阶段：`componentDidUpdate()` 和 `shouldComponentUpdate()`
（在 `shouldComponentUpdate()` 中使用 `setState()` 通常是不推荐的，
因为可能导致无限循环更新）
- 在卸载阶段：`componentWillUnmount()`

需要注意的是，不能在 `render()` 方法中直接调用 `setState()`，因为这可能导致循环更新。

2.2 Code Push的原理是什么？

CodePush 是一个由 Microsoft 开发的工具，用于实现在 React Native 应用程序中进行动态更新。
其原理如下：

1.打包应用程序：
首次构建应用程序时，开发人员会将其打包成一个可部署的二进制文件，
然后将其发布到应用商店（如 Apple App Store 或 Google Play Store）。

2.CodePush 部署：
开发人员在 CodePush 服务器上创建应用程序的新版本，并将新版本的更新包上传到服务器。

3.客户端检查更新：
当用户打开应用程序时，客户端会向 CodePush 服务器发出请求，检查是否有新版本可用。

4.下载更新：
如果发现有新版本可用，客户端会从 CodePush 服务器下载更新包，该更新包只包含发生更改的文件，而不是整个应用程序。

5.应用程序更新：
下载完成后，客户端会将更新包应用到本地应用程序中，替换旧版本的文件。

6.重启应用程序：
更新包应用完成后，客户端会提示用户重新启动应用程序，以确保新的更新生效。

CodePush 的优势在于，它允许开发人员在不通过应用商店审核的情况下，快速部署应用程序的修复、改进或新功能。
这种动态更新的方式可以大大缩短发布周期，提高开发人员的灵活性和用户体验。

2.3 有没有做过动画？

React Native 中有一些自带的动画组件和库，同时也有许多第三方动画库可供选择。
下面是一些 React Native 中常用的自带动画组件和三方动画库：

1.自带动画组件

1. `Animated` API：
React Native 提供了 `Animated` API，
允许你创建各种动画效果，包括平移、缩放、旋转、透明度变化等。
这是 React Native 中最常用的动画工具。
2. `LayoutAnimation`：
`LayoutAnimation` 是 React Native 提供的另一个动画工具，
用于在组件布局发生变化时创建动画效果。
它可以用来实现简单的布局动画，比如元素的插入、删除、更新等。

2.第三方动画库

1. `react-native-animatable`：
这是一个简单易用的动画库，提供了一系列预定义的动画效果，可以通过简单的配置来使用。
2. `react-native-reanimated`：
这是一个强大的动画库，提供了更高级的动画特性和性能优化。
它使用了原生动画驱动器，能够实现更流畅的动画效果，并支持更复杂的交互式动画。
3. `react-native-gesture-handler`：
这个库提供了一些手势处理器，可以用来实现各种手势交互效果，比如拖拽、缩放、旋转等。
它与 `react-native-reanimated` 结合使用时，可以实现更复杂的手势动画效果。
4. `react-native-svg`：
如果你需要在 React Native 中使用 SVG 图形，并且希望实现动画效果，
`react-native-svg` 提供了一些工具和组件来实现 SVG 动画。

这些都是 React Native 中常用的动画工具和库，
你可以根据项目需求和个人偏好选择合适的动画工具来使用。

2.4 极光推送有没有遇到什么问题？怎么解决的？

极光推送（JPush）在 React Native 中使用时可能会遇到一些常见的问题，其中一些包括：

1. 集成问题：
在将极光推送集成到 React Native 项目时，可能会遇到依赖冲突、配置错误或环境配置问题等。
解决此类问题通常需要仔细阅读官方文档，并确保按照指南一步步进行集成。

2. 设备注册问题：
在应用启动时，需要确保设备成功注册到极光推送服务。
如果注册失败，可能会导致无法接收推送消息。
解决此问题需要检查设备注册代码，确保正确调用了相关的注册方法，并且应用的权限设置正确。

3. 消息接收问题：
如果应用无法接收到极光推送的消息，可能是因为网络连接问题、权限设置不正确或者是应用代码中的错误等。
解决此类问题需要逐步排查，检查网络连接是否正常、应用权限是否被正确设置、消息接收代码是否正确等。

4. 推送消息显示问题：
在收到推送消息后，可能会遇到消息无法显示或者显示不正确的问题。
这可能是因为消息格式不正确、消息处理代码有问题或者是应用状态不正确等。
解决此类问题需要检查推送消息的格式是否符合预期、消息处理代码是否正确，并确保应用在各种状态下都能正确处理推送消息。

为了解决这些问题，可以采取以下一些措施：

- 详细阅读极光推送的官方文档，确保正确地集成和使用推送服务。
- 在集成和调试过程中，利用调试工具和日志输出来定位问题所在。
- 参考社区或官方的技术支持论坛，查找其他开发者可能遇到的类似问题和解决方案。
- 使用极光推送提供的监控和统计功能，查看推送服务的状态和推送消息的发送情况，以帮助定位问题。

最后，及时更新极光推送的 SDK 版本和相关依赖，以确保使用最新的稳定版本，并且关注官方发布的更新和修复信息。

2.5 自己有没有封装过什么组件？

封装 React Native 组件是一个常见的任务，它可以提高代码的可重用性和可维护性。
下面是一个基本的流程，用于封装一个 React Native 组件：

1. 确定组件功能和设计： 
首先，确定你想要封装的组件的功能和设计。
考虑组件应该有哪些属性（props）、状态（state）、样式和其他行为。

2. 创建组件文件：
在你的 React Native 项目中，创建一个新的 JavaScript 文件来存放你的组件代码。
你可以根据需要选择函数组件或类组件来实现你的组件。

3. 编写组件代码：
在组件文件中，编写组件的代码。根据你之前确定的设计，定义组件的属性、状态和样式，并实现组件的渲染逻辑和行为。

4. 测试组件：
在一个测试环境中测试你的组件，确保它能够按照预期工作。
你可以在一个独立的测试应用或者你的主应用中使用组件进行测试。

5. 优化组件：
根据测试结果和反馈，优化你的组件代码。这可能包括改进组件的性能、增加新的功能或者修复 bug。

6. 文档和示例：
为你的组件编写文档，并提供一些示例代码，以帮助其他开发者更好地理解和使用你的组件。

7. 发布组件：
如果你打算分享你的组件给其他开发者使用，你可以将它发布到一个 npm 包中。
确保为你的组件添加一个描述性的 README 文件，并提供必要的信息和指南。

8. 维护组件：
定期更新你的组件，以适应新的 React Native 版本和需求变化。
如果其他开发者提出了问题或者提出了改进建议，及时地响应并进行维护。

2.6 数据存储是怎么做的？

在 React Native 中，常见的数据存储方法包括使用 Async Storage、SQLite、Realm、Firebase 等。
下面是针对每种方法的简要介绍：

1. Async Storage： 
Async Storage 是 React Native 内置的简单、异步的持久化存储解决方案，用于存储小量的数据，比如用户配置信息、应用状态等。
它使用键值对的方式存储数据，并且是异步操作，不会阻塞 JavaScript 线程

2. SQLite：
SQLite 是一种轻量级的关系型数据库，可以在 React Native 中使用。
可以使用第三方库如 `react-native-sqlite-storage` 或 `expo-sqlite` 来进行 SQLite 数据库操作，用于存储大量结构化数据。

3. Realm：
Realm 是一个跨平台的移动数据库解决方案，提供了快速、易用、安全的数据存储和查询功能。
它与 React Native 集成良好，并且支持多种数据类型和复杂查询。

4. Firebase：
Firebase 是 Google 提供的一套移动和 Web 应用开发平台，其中包含了实时数据库、文件存储、认证服务等功能。
可以使用 Firebase 提供的数据库服务来存储和同步应用的数据

选择适合你项目需求的数据存储方法取决于多种因素，如数据量、数据结构、性能需求、开发成本等。
根据实际情况，你可以选择上述方法中的一种或多种来存储你的数据。

2.7 上传图片时图片过大时应该对服务器做些什么？

当用户上传的图片过大时，服务器可以采取以下几种策略来处理：

1. 限制图片大小：
在前端上传图片之前，可以通过 JavaScript 或 React Native 库对图片进行预处理，检查图片的大小并限制上传的大小。
这样可以避免用户上传过大的图片，减少服务器的压力。

2. 压缩图片：
在服务器端接收到图片之后，可以对图片进行压缩处理，减小图片的文件大小。
压缩算法可以选择合适的压缩比例或者采用专业的图片压缩库来进行处理。

3. 裁剪图片：
如果用户上传的图片尺寸过大，可以考虑对图片进行裁剪处理，将图片缩小到合适的尺寸。
这样可以减少图片的像素数量，降低图片文件的大小。

4. 异步处理：
对于上传的大型图片文件，可以将图片存储到临时文件中，并在后台异步处理。
这样可以避免阻塞服务器主线程，提高服务器的并发处理能力。

5. 返回错误信息：
如果图片大小超出服务器的限制，可以返回错误信息给客户端，提示用户上传的图片过大，并且提供合适的建议或指导。

综合考虑以上策略，可以根据实际情况和需求选择合适的处理方式。
通常情况下，建议在客户端和服务器端都进行图片大小的限制和处理，以保证系统的稳定性和性能。

2.8 遇到了什么问题？怎么解决的？

在 React Native 开发中，开发者可能会遇到各种各样的问题，包括但不限于：

1. 编译错误：
可能会遇到语法错误、拼写错误或者组件引用错误等，导致应用无法正确编译。
解决方法包括仔细检查代码、查看错误提示信息、查阅文档或搜索相关问题。

2. 运行时错误：
应用在运行时可能会出现各种各样的错误，比如组件渲染错误、网络请求失败、数据处理错误等。
解决方法包括使用调试工具、添加错误边界、进行代码审查等。

3. 性能问题：
应用可能会出现性能问题，比如界面卡顿、加载速度慢、内存泄漏等。
解决方法包括优化代码、减少资源消耗、使用性能分析工具等。

4. 兼容性问题：
应用可能在不同平台或不同设备上出现兼容性问题，导致界面显示不正常或功能无法正常使用。
解决方法包括使用响应式设计、针对不同平台进行优化、使用兼容性测试工具等。

5. 第三方库问题：
使用第三方库时可能会遇到依赖冲突、文档不完善或者功能不稳定等问题。
解决方法包括查阅官方文档、参考社区讨论、提出问题反馈等。

解决这些问题的方法通常包括但不限于以下几种：

- 仔细检查错误提示信息，并尝试理解问题的根本原因。
- 查阅官方文档、社区论坛或相关的博客文章，寻找解决方法和优化建议。
- 使用调试工具和性能分析工具来定位和解决问题。
- 如果遇到了特定的第三方库问题，可以查看其 GitHub 页面或提交 issue 寻求帮助。
- 与团队成员或其他开发者交流，共同探讨和解决问题。

总的来说，解决问题的关键在于理解问题的本质和原因，采取合适的方法和工具进行解决，并保持耐心和持续学习。

2.9 适配怎么做的？

React Native 的适配主要指的是在不同的设备和屏幕尺寸上保持应用界面的一致性和良好的用户体验。
以下是一些常用的 React Native 适配技巧：

1. 使用 Flexbox 布局：
Flexbox 是 React Native 的主要布局方式，它可以根据屏幕尺寸和设备方向动态调整组件的布局和大小。
使用 Flexbox 可以实现简单而灵活的界面适配。

2. 使用百分比尺寸：
在设置组件的尺寸时，可以使用百分比值来指定相对于父组件的大小。
这样可以使得组件在不同尺寸的屏幕上保持一定的比例。

3. 响应式设计：
采用响应式设计的方式来布局界面，即根据屏幕尺寸和方向调整布局和样式。
可以使用 Dimensions API 来获取屏幕尺寸，并根据需要进行样式调整。

4. 使用 SafeAreaView：
SafeAreaView 是 React Native 提供的一个组件，用于确保组件在 iPhone X 及以上设备上显示正常。
可以将主要内容放置在 SafeAreaView 中，以确保不被刘海或底部安全区域遮挡。

5. 针对不同平台进行适配：
可以针对不同的平台（iOS 和 Android）进行定制化的适配。
可以使用 Platform API 来检测当前运行的平台，并根据需要加载不同的组件或样式。

6. 测试和调试：
在开发过程中，可以使用模拟器、真机测试和调试工具来检查应用在不同设备和屏幕尺寸上的显示效果，并进行必要的调整和优化。

通过以上技巧，可以使得 React Native 应用在不同设备和屏幕尺寸上都能够呈现出良好的用户体验，从而提高应用的适配性和用户满意度。

三 参考

• React Native 面试题整理