锐客网

  1. 首页 > 生活百科 > it技术 > >

React Native常见面试题整理（问题和解答）

IT知识

React Native 是一个基于 JavaScript 的移动应用程序框架，旨在通过为编码人员提供一个工具来使用 React 和原生移动平台来创建适用于 iOS 和 Android 的移动应用程序。React Native 的主要优点是代码可以一次编写并在 IOS 和 Android 之间共享。在外观和感觉方面都感觉真正“原生”的移动应用程序可以使用 Javascript 本身构建。
基本React Native常见面试题合集1. React-native 和 ReactJS 有什么不同？

  • 使用范围
    ReactJs -  React是一个 JavaScript 库，用于为构建 Web 应用程序构建响应式用户界面。
    React Native - 它是一个用于创建具有原生感觉的移动应用程序的框架。
  • 语法
    React 和 React Native 都使用 JSX（JavaScript XML）语法，但 React 使用 html 标签，如 < div> < h1> < p> 等，而 React Native 使用 < view> < text> 等。
  •   动画和手势
    React 主要使用 CSS 动画来实现网页动画，而推荐的为组件设置动画的方法是使用 React-Native 提供的 Animated API。
  • 路由机制
    React 使用 react-router 进行路由，没有任何内置的路由功能，但 React Native 有一个内置的 Navigator 库用于导航移动应用程序。
ReactJSReact Native
它用于开发 Web 应用程序。它用于开发移动应用程序。
它使用 React-router 来导航网页。它具有用于导航移动应用程序的内置导航器库。
它使用 HTML 标签。它不使用 HTML 标签。
它提供了高安全性。与 ReactJS 相比，它提供的安全性较低。
在此，虚拟 DOM 呈现浏览器代码。在这方面，Native 使用其 API 来呈现移动应用程序的代码。
2. React Native常见面试题有哪些：什么是 Flexbox 并详细描述其最常用的属性？
React Native面试题解析：它是一种布局模型，允许元素在容器内对齐和分配空间。使用灵活的宽度和高度时，Flexbox 可以对齐主容器内部的所有内容以填充空间或在元素之间分配空间，这使其成为用于响应式设计系统的绝佳工具。
属性值描述
flexDirection‘column’,'row'用于指定元素是垂直对齐还是水平对齐 
justifyContent'center','flex-start','flex-end','space-around','space-between'用于确定元素应该如何分布在容器内 
alignItems'center','flex-start','flex-end','stretched'用于确定元素应如何沿辅助轴分布在容器内（与 flexDirection 相对）
3. 描述使用 React Native 的优势？
使用 React Native 有多种优势，例如，
  • 大型社区
    React Native 是一个开源框架，它完全由社区驱动，因此任何挑战都可以通过从其他开发人员那里获得在线帮助来解决。
     
  • 可重用性
    代码可以编写一次，可用于IOS和ANDROID，这有助于维护和调试大型复杂应用程序，因为不需要单独的团队来支持这两个平台，这也大大降低了成本。
     
  • 实时重载和热重载
    实时重载会在文件更改时重载或刷新整个应用程序。例如，如果你在导航深处有四个链接并保存了更改，则实时重新加载将重新启动应用程序并将应用程序加载回初始路线。
    热重载仅刷新已更改的文件，而不会丢失应用程序的状态。例如，如果你在导航深处有四个链接并保存了对某些样式的更改，则状态不会更改，但新样式会出现在页面上，而无需导航回你所在的页面，因为你仍然会在同一页面上。
     
  • 额外的第三方插件
    如果现有的模块不能满足 React Native 的业务需求，我们也可以使用第三方插件，这可能有助于加快开发过程。
4. 一般什么是线程？并解释 ReactNative 中不同线程的使用？
程序内的单个顺序控制流可以由线程控制。

React Native 现在使用 3 个线程：
  • MAIN/UI 线程— 这是运行你的 Android/iOS 应用程序的主应用程序线程。应用程序的 UI 可以由主线程更改并且它可以访问它。
     
  • Shadow Thread  — 在 React Native 中使用 React 库创建的布局可以通过这个计算，它是一个后台线程。
     
  • JavaScript 线程——主要的 Javascript 代码由该线程执行。
5. React Native 中是否提供默认道具，如果是，它们使用什么以及如何使用？
是的，React Native 中的默认 props 可用，因为它们适用于 React，如果对于一个实例我们没有传递 props 值，组件将使用默认的 props 值。
从“React”导入React，{组件}；
import {View, Text} from 'react-native'; class DefaultPropComponent extends Component { render() { return ( < View> < Text> {this.props.name} < /Text> < /View> ) } } Demo.defaultProps = { name: 'BOB' }export default DefaultPropComponent;

6. React Native 是如何处理用户输入的？
TextInput 是一个核心组件，允许用户输入文本。它有一个 onChangeText 道具，每次文本更改时都会调用一个函数，还有一个 onSubmitEditing 道具，它在提交文本时调用一个函数。
import React, { useState } from 'react'; import { Text, TextInput, View } from 'react-native'; const PizzaTranslator = () => { const [ text, setText] = useState(''); return ( < View style={{padding: 10}}> < TextInput style={{height: 40}} placeholder="Type here to translate!" onChangeText={text => setText(text)} defaultValue=https://www.lsbin.com/{text} /> < Text style={{padding: 10, fontSize: 42}}> {text.split(' ').map((word) => word & & '??').join(' ')} < /Text> < /View> ); }export default PizzaTranslator;

7. 什么是 State 以及它在 React Native 中是如何使用的？
它用于控制组件。变量数据可以存储在状态中。它是可变的，意味着状态可以随时更改值。
import React, {Component} from 'react'; import { Text, View } from 'react-native'; export default class App extends Component { state = { myState: 'State of Text Component' } updateState = () => this.setState({myState: 'The state is updated'}) render() { return ( < View> < Text onPress={this.updateState}> {this.state.myState} < /Text> < /View> ); } }

这里我们创建了一个带有状态数据的 Text 组件。每当我们单击 Text 组件时，它的内容都会更新。状态由事件 onPress 更新。
8.什么是React Native中的Redux，并给出React Native应用程序中使用的Redux的重要组件？
Redux 是 JavaScript 应用程序的可预测状态容器。它有助于编写在不同环境中运行的应用程序。这意味着应用程序的整个数据流都在单个容器中处理，同时保持以前的状态。
操作：是将数据从你的应用程序发送到你的商店的信息负载。它们是商店的唯一信息来源。这意味着如果需要任何状态更改，所需的更改将通过操作进行调度。

Reducers：  “动作描述了某些事情发生的事实，但没有指定应用程序的状态如何响应变化。这是减速机的工作。”  当一个动作被调度以改变状态时，它的减速器有责任对状态进行必要的改变并返回应用程序的新状态。

店铺：可以在 reducers 的帮助下创建一个 store，它保存了应用程序的整个状态。推荐的方法是为整个应用程序使用单个存储，而不是拥有多个存储，这将违反只有一个存储的 redux 的使用。

组件：这是保存应用程序 UI 的地方。
9. React Native常见面试题有哪些：描述 React Native 应用程序中的定时器？
计时器是任何应用程序的重要组成部分，React Native 实现了浏览器计时器。

计时器
 
  • 设置超时，清除超时
可能有业务需求在等待一段时间后或延迟后执行某段代码，在这种情况下可以使用 setTimeout，clearTimeout 只是用来清除启动的定时器。
setTimeout(() => { yourFunction(); }, 3000);

  • 设置间隔，清除间隔
【React Native常见面试题整理（问题和解答）】setInterval 是一种在特定时间间隔后调用函数或运行某些代码的方法，如通过第二个参数指定的那样。
setInterval(() => { console.log('Interval triggered'); }, 1000);

绑定到区间的函数或代码块会一直执行，直到它停止。要停止间隔，我们可以使用 clearInterval() 方法。
  • 设置立即，清除立即
尽快调用函数或执行。
var immediateID = setImmediate(function); // The below code displays the alert dialog immediately. var immediateId = setImmediate( () => {alert('Immediate Alert'); }

clearImmediate 用于取消由 setImmediate() 设置的立即操作。
  • 请求动画帧，取消动画帧
这是执行动画的标准方式。
调用函数以在下一个动画帧之前更新动画。
var requestID = requestAnimationFrame(function); // The following code performs the animation. var requestId = requestAnimationFrame( () => { // animate something} )

cancelAnimationFrame 用于取消 requestAnimationFrame() 设置的函数。
10. 如何调试 React Native 应用程序并命名用于它的工具？
在 React Native 世界中，调试可能以不同的方式和使用不同的工具完成，因为 React Native 由不同的环境（iOS 和 Android）组成，这意味着存在各种各样的问题和调试所需的各种工具。
  • 开发人员菜单：

    重新加载：重新加载应用程序
    远程调试 JS：打开 JavaScript 调试器的通道
    启用实时重新加载：使应用程序在单击“保存”时自动
    重新加载 启用热重新加载：
    监视更改的文件中产生的更改Toggle Inspector：切换检查器界面，它允许我们检查屏幕上的任何 UI 元素及其属性，并显示一个界面，该界面具有其他选项卡，如网络，显示 HTTP 调用，以及性能选项卡。
  • Chrome 的 DevTools：

    Chrome 可能是第一个用于调试 React Native 的工具。通常使用 Chrome 的 DevTools 来调试 Web 应用程序，但我们也可以使用它们来调试 React Native，因为它由 JavaScript 提供支持。要将 Chrome 的 DevTools 与 React Native 一起使用，首先确保连接到相同的 Wi-Fi，然后按命令+ R 如果你使用的是 macOS，或者 Ctrl + M 在 Windows/Linux 上。在开发者菜单中，选择 Debug Js Remotely。这将打开默认的 JS 调试器。
     
  • React 开发者工具
    要使用 React 的开发者工具调试 React Native，你需要使用桌面应用程序。只需运行以下命令即可在项目中全局或本地安装它：
    yarn add react-devtools
    或者 npm：
    npm install react-devtools --save

    React 的开发人员工具可能是调试 React Native 的最佳工具，原因有两个：
    它允许调试 React 组件。
    还可以在 React Native 中调试样式。还有一个带有此功能的新版本，它也可以与开发人员菜单中的检查器一起使用。以前，编写样式是一个问题，必须等待应用程序重新加载才能看到更改。现在我们可以调试和实现样式属性并立即查看更改的效果，而无需重新加载应用程序。
     
  • React Native Debugger
    在你的 React Native 应用程序中使用 Redux 时，React Native Debugger 可能是适合你的调试器。这是一个独立的桌面应用程序，适用于 macOS、Windows 和 Linux。它甚至将 Redux 的 DevTools 和 React 的开发者工具集成在一个应用程序中，因此你不必使用两个单独的应用程序进行调试。
     
React Native CLI
你也可以使用 React Native CLI 进行一些调试。它还可以用于显示应用程序的日志。点击 react-native log-android 会显示 Android 上 db logcat 的日志，在 iOS 中查看日志可以运行 react-native log-ios，使用 console.log 可以将日志发送到终端：
console.log("some error??")

11. 什么是道具钻孔，如何避免？
Props Drilling (Threading) 是一个概念，指的是你将数据从父组件传递到确切的子组件之间的过程，其他组件拥有 props 只是为了将其向下传递。
避免它的步骤
1. 响应上下文 API。
2. 组合
3. 渲染道具
4. HOC
5. Redux 或 MobX
12. 描述 React Native 中的网络以及如何在 React Native 中进行 AJAX 网络调用？
React Native 为网络需求提供了 Fetch API。 
要从任意 URL 获取内容，我们可以传递 URL 来获取：
fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue' }) });

联网本质上是一种异步操作。Fetch 方法将返回一个 Promise，这使得编写以异步方式工作的代码变得简单：
const getMoviesFromApi = () => { return fetch('https://reactnative.dev/movies.json') .then((response) => response.json()) .then((json) => { return json.movies; }) .catch((error) => { console.error(error); }); };

XMLHttpRequest API 内置于 React Native 由于飞盘和 Axios 使用 XMLHttpRequest 我们甚至可以使用这些库。
var request = new XMLHttpRequest(); request.onreadystatechange = (e) => { if (request.readyState !== 4) { return; } if (request.status === 200) { console.log('success', request.responseText); } else { console.warn('error'); } }; request.open('GET', 'https://mywebsite.com/endpoint/'); request.send();

13. 列出将 React Native 集成到现有 Android 移动应用程序中的关键点
将 React Native 组件集成到 Android 应用程序中的主要注意事项是：
  • 设置 React Native 依赖项和目录结构。
  • 用 JavaScript 开发你的 React Native 组件。
  • 将 ReactRootView 添加到你的 Android 应用程序。这个视图将作为你的 React Native 组件的容器。
  • 启动 React Native 服务器并运行你的Native应用程序。
  • 最后，我们需要验证应用程序的 React Native 方面是否按预期工作。
中级React Native常见面试题合集14. 整个 React Native 代码如何处理以在移动屏幕上显示最终输出
  • 在应用程序第一次启动时，主线程开始执行并开始加载 JS 包。
  • 当 JavaScript 代码加载成功后，主线程会将其发送到另一个 JS 线程，因为当 JS 进行一些繁重的计算时，该线程会占用一段时间，UI 线程不会一直受到影响。
  • 当 React 开始渲染时，Reconciler 开始“diffing”，当它生成一个新的虚拟 DOM（布局）时，它会将更改发送到另一个线程（Shadow 线程）。
  • 阴影线程计算布局，然后将布局参数/对象发送到主（UI）线程。（这里你可能想知道为什么我们称它为“阴影”？因为它会生成阴影节点）
  • 由于只有主线程能够在屏幕上渲染某些内容，因此影子线程应该将生成的布局发送到主线程，然后才渲染 UI。
15. 什么是桥，为什么在 React Native 中使用它？安卓和IOS都解释一下？
React Native面试题解析：ReactNative 中的 Bridge 是一个层或简单的连接，负责将
Native 和 JavaScript 环境粘合 在一起。
考虑下图：
  • 最靠近运行应用程序的设备的层是本地层。
     
  • 桥基本上是一个传输层，充当 Javascript 和 Native 模块之间的连接，它负责将异步序列化批处理响应消息从 JavaScript 传输到 Native 模块。

    现在举个例子，发生了一些状态变化，因此 React Native 将批量更新 UI 并将其发送到 Bridge。网桥将这个序列化的批处理响应传递给本地层，它会处理所有可以与序列化的批处理响应区分开来的命令，并相应地更新用户界面。

    IOS平台：

      安卓平台：                       
16. 命名 React Native 中的核心组件以及这些组件与 Web 相比的类比。
React Native 中使用的核心组件是 < View> , < Text> , < Image> , < ScrollView> , < TextInput>

和 Web 相比的类比可以通过下图来解释：
React原生 UI 组件安卓视图IOS视图网络模拟描述
< View> < ViewGroup> < UIView> 一个不滚动  < div> 一个支持 flexbox 样式布局、一些触摸处理和可访问性控件的容器。
< Text> < TextView> < UITextView> < p> 显示、设置样式和嵌套文本字符串，甚至处理触摸事件。
< Image> < ImageView> < UIImageView> < img> 显示不同类型的图像
< ScrollView> < ScrollView> < UIScrollView> < div> 可以包含多个组件和视图的通用滚动容器。
< TextInput> < EditText> < UITextField> < input type="text"> 允许用户输入文本
17. 什么是 ListView 并描述它在 React Native 中的用途？
React Native ListView 是一个视图组件，它包含项目列表并将其显示在可垂直滚动的列表中。
export default class MyListComponent extends Component { constructor() { super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows([ 'Android','iOS', 'Java','Php', 'Hadoop', 'Sap', 'Python','Ajax', 'C++']), }; } render() { return ( < ListView dataSource={this.state.dataSource} renderRow={ (rowData) => < Text style={{fontSize: 30}}>{rowData}< /Text>} /> ); } }

18.如何在同一个代码库中为IOS和Android编写不同的代码？有没有可用的模块？
平台模块检测应用程序运行所在的平台。
import { Platform, Stylesheet } from 'react-native'; const styles = Stylesheet.create({ height: Platform.OS === 'IOS' ? 200 : 400 })

此外可用的 Platform.select 方法将包含 Platform.OS 的对象作为键并返回你当前所在平台的值。
import { Platform, StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, ...Platform.select({ ios: { backgroundColor: 'red', }, android: { backgroundColor: 'green', }, default: { // other platforms, web for example backgroundColor: 'blue', },}), }, });

19. React Native常见面试题有哪些：react Native 中有哪些 Touchable 组件，什么时候使用？
点击手势可以被 Touchable 组件捕获，并且可以在手势被识别时显示反馈。
根据你想要提供的反馈类型，我们选择可触摸组件。
通常，我们会在你在网络上使用按钮或链接的任何地方使用 TouchableHighlight。当用户按下按钮时，视图的背景将变暗。
我们可以在 Android 上使用 TouchableNativeFeedback 来显示响应用户触摸的墨水表面React波纹。
TouchableOpacity 可用于通过降低按钮的不透明度来提供反馈，允许在用户按下时透视背景。
如果我们需要处理点击手势但你不想显示任何反馈，请使用 TouchableWithoutFeedback。
import React, { Component } from 'react'; import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native'; export default class Touchables extends Component { _onPressButton() { alert('You tapped the button!')} _onLongPressButton() { alert('You long-pressed the button!') } render() { return ( < View style={styles.container}> < TouchableHighlight onPress={this._onPressButton} underlayColor="white"> < View style={styles.button}> < Text style={styles.buttonText}>TouchableHighlight< /Text> < /View> < /TouchableHighlight> ); } }

20. 解释 FlatList 组件，它的主要功能是什么以及代码示例？
FlatList 组件在可滚动列表中显示类似结构的数据。它适用于大型数据列表，其中列表项的数量可能会随时间变化。
关键特点：
FlatList 仅显示当前显示在屏幕上的那些渲染元素，而不是一次显示列表中的所有元素。
import React, { Component } from 'react'; import { AppRegistry, FlatList, StyleSheet, Text, View,Alert } from 'react-native'; export default class FlatListBasics extends Component { renderSeparator = () => { return ( < View style={{ height: 1, width: "100%", backgroundColor: "#000", }} /> ); }; //handling onPress action getListViewItem = (item) => { Alert.alert(item.key); } render() { return ( < View style={styles.container}> < FlatList data=https://www.lsbin.com/{[ {key:'Android'},{key: 'iOS'}, {key: 'Java'},{key: 'Swift'}, {key: 'Php'},{key: 'Hadoop'},{key: 'Sap'}, ]} renderItem={({item}) => < Text style={styles.item} onPress={this.getListViewItem.bind(this, item)}>{item.key}< /Text>} ItemSeparatorComponent={this.renderSeparator} /> < /View> ); } } AppRegistry.registerComponent('AwesomeProject', () => FlatListBasics);

21. 如何在 React Native 中使用带有 React Navigation 的路由？
React Native 应用程序中用于路由和导航的流行库之一是 React Navigation。
该库有助于解决在多个屏幕之间导航并在它们之间共享数据的问题。
import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator(); const MyStack = () => { return ( < NavigationContainer> < Stack.Navigator> < Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Welcome' }} /> < Stack.Screen name="Profile" component={ProfileScreen} /> < /Stack.Navigator> < /NavigationContainer> ); };

22. React Native Application 有哪些不同的样式？
默认情况下，React Native 为我们提供了两种强大的方式来设计我们的应用程序：
1）风格道具
你可以使用样式道具为组件添加样式。你只需向元素添加样式道具，它就会接受一个属性对象。
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View} from 'react-native'; export default class App extends Component< Props> { render() { return ( < View style={{flex:1,justifyContent:"center",backgroundColor:"#fff", alignItems:"center"}}> < View style={{width:200,height:150,backgroundColor:"red",padding:10}}> < Text style={{fontSize:20, color:"#666"}}>Styled with style props< /Text> < /View> < /View> ); } }

  2) 使用样式表
对于非常大的代码库，或者你想为元素设置许多属性，直接在 style props 中编写我们的样式规则会使我们的代码更加复杂，这就是为什么 React Native 为我们提供另一种方式，让我们使用 StyleSheet 方法编写简洁的代码：
import { StyleSheet} from 'react-native'; const styles = StyleSheet.create({ container: { flex:1, justifyContent:"center", backgroundColor:"#fff", alignItems:"stretch" }, title: { fontSize:20, color:"#fff" }, item1: { backgroundColor:"orange", flex:1 }, item2: { backgroundColor:"purple", flex:1 }, item3: { backgroundColor:"yellow", flex:1 },});

  然后我们通过样式道具将样式对象传递给我们的组件：
< View style={styles.container}> < View style={styles.item1}> < Text style={{fontSize:20, color:"#fff"}}>Item number 1< /Text> < /View> < View style={styles.item2}> < Text style={{fontSize:20, color:"#fff"}}>Item number 1< /Text> < /View> < View style={styles.item3}> < Text style={{fontSize:20, color:"#fff"}}>Item number 1< /Text> < /View> < View style={styles.item4}> < Text style={{fontSize:20, color:"#fff"}}>Item number 1< /Text> < /View> < /View>

3 ) React Native 中的样式组件
我们还可以将 styled-components 与 React Native 结合使用，这样你就可以像编写普通 CSS 一样在 React Native 中编写样式。将它包含在你的项目中非常容易，并且不需要任何链接，只需在应用程序的根目录中运行以下命令即可安装它：
纱线添加样式组件
import React, {Component} from 'react'; import { StyleSheet,Text, View} from 'react-native'; import styled from 'styled-components' const Container=styled.View` flex:1; padding:50px 0; justify-content:center; background-color:#f4f4f4; align-items:center ` const Title=styled.Text` font-size:20px; text-align:center; color:red; ` const Item=styled.View` flex:1; border:1px solid #ccc; margin:2px 0; border-radius:10px; box-shadow:0 0 10px #ccc; background-color:#fff; width:80%; padding:10px; `export default class App extends Component { render() { return ( < Container> < Item > < Title >Item number 1< /Title> < /Item> < Item > < Title >Item number 2< /Title> < /Item> < Item > < Title >Item number 3< /Title> < /Item> < Item > < Title >Item number4< /Title> < /Item> < /Container> ); }

23. 解释 React Native 中的异步存储并定义何时使用它，何时不使用它？
  • 异步存储是 React Native 等价于 Web 的本地存储。
  • Async Storage 是一个社区维护的 React Native 模块，提供异步、未加密的键值存储。异步存储不在应用之间共享：每个应用都有自己的沙箱环境，无法访问其他应用的数据。
请在以下情况下使用异步存储...不要使用异步存储...
跨应用程序运行保留非敏感数据代币存储
持久化 Redux 状态秘密
持久化 GraphQL 状态 
存储全局应用程序范围的变量 
高级React Native常见面试题合集24. React Native 性能问题背后的真正原因是什么？
React Native 性能问题背后的真正原因是每个线程（即 Native 和 JS 线程）都非常快。当你将组件从一个线程不必要地或超出需要地从一个线程传递到另一个线程时，就会出现 React Native 应用程序的性能瓶颈。在 React Native 中避免任何与性能相关的问题的主要经验法则是将通过桥接的次数保持在最低限度。 
  • 为运行 Java/Kotlin、Swift/Objective C 而构建的Native线程
  • Javascript 线程是运行从基于 javascript 的动画到其他 UI 组件的所有内容的主要线程
  • 顾名思义，桥接器充当了原生和 JS 线程的中间通信点
25. 列出优化应用程序的一些步骤。
  • 使用 Proguard 来最小化应用程序的大小。（它通过剥离应用程序未使用的部分 React Native Java 字节码（及其依赖项）来实现这一点）
  • 为特定 CPU 架构创建缩小大小的 APK 文件。当你这样做时，你的应用程序用户将自动获取其特定手机架构的相关 APK 文件。这消除了保留支持多种架构的 JSCore 二进制文件的需要，从而减少了应用程序的大小。
  • 压缩图像和其他图形元素。减小图像大小的另一种选择是使用 APNG 等文件类型代替 PNG 文件。
  • 不要存储原始 JSON 数据，否则我们需要对其进行压缩或将其转换为静态对象 ID。
  • 优化Native库。
  • 优化状态操作的数量，并记住在需要时使用纯组件和记忆组件
  • 明智地使用全局状态，例如最坏的情况是当 TextInput 或 CheckBox 等单个控件的状态更改传播整个应用程序的渲染时。使用 Redux 或 Overmind.js 等库以更优化的方式处理状态管理。
  • 在列表项上使用 key 属性，它可以帮助 React Native 在渲染一长串数据时选择要更新的列表 
  • 对大型数据集使用 VirtualizedList、FlatList 和 SectionList。
  • 清除所有可能导致严重内存泄漏问题的活动计时器。
26. 描述 React Native 中的内存泄漏问题，如何检测和解决？
React Native面试题解析：在 JavaScript 中，内存由垃圾收集器 (GC) 自动管理。简而言之，垃圾收集器是一个后台进程，它定期遍历已分配对象及其引用的图形。如果碰巧遇到未被根对象直接或间接引用的图的一部分（例如，堆栈上的变量或全局对象，如窗口或导航器），则可以从内存中释放整个部分。

在 React Native 世界中，每个 JS 模块范围都附加到一个根对象。许多模块，包括 React Native 核心模块，都声明了保留在主作用域中的变量（例如，当你在 JS 模块中定义类或函数之外的对象时）。这些变量可能会保留其他对象，从而防止它们被垃圾收集。

内存泄漏的一些原因：
  • 在 componentDidMount 中添加了未发布的计时器/侦听器
  • 关闭范围泄漏
检测 IOS 的内存泄漏：

在 Xcode 中，

转到 XCode → Product → Profile (? + i)

之后显示所有模板选择泄漏。

检测Android内存泄漏：

正常运行React Native应用程序(react-native run-android)
运行Android Studio

在菜单上，
点击工具→Android→启用ADB集成
点击工具→Android→Android设备监视器
当Android设备监视器出现时，点击Monitor → Preferences

还有一种在Android
Perf Monitor（性能监视器）中的方法是用于android泄漏监控的不错选择。
Import PerfMonitor from 'react-native/Libraries/Performance/RCTRenderingPerf'; PerfMonitor.toggle(); PerfMonitor.start(); setTimeout(() => { PerfMonitor.stop(); }, 20000); }, 5000);

27. 在 React 中存储敏感数据是否有任何开箱即用的方式？如果是，如何实现，如果不是，如何实现？
React Native 没有捆绑任何存储敏感数据的方式。但是，已有适用于 Android 和 iOS 平台的解决方案。
iOS - 钥匙串服务
钥匙串服务允许你为用户安全地存储小块敏感信息。这是存储证书、令牌、密码和任何其他不属于异步存储的敏感信息的理想场所。

Android - Secure Shared Preferences#
Shared Preferences 是持久键值数据存储的 Android 等效项。Shared Preferences 中的数据默认不加密，但 Encrypted Shared Preferences 包装了 Android 的 Shared Preferences 类，并自动加密密钥和值。

Android - 密钥库
Android Keystore 系统允许你将加密密钥存储在容器中，从而更难从设备中提取。为了使用 iOS Keychain 服务或 Android Secure Shared Preferences，你可以自己编写桥接器或使用为你包装它们并提供统一 API 的库，风险自负。一些需要考虑的库：
  • Expo-secure-store
  • React Native钥匙串
  • react-native-sensitive-info - 适用于 iOS，但使用适用于 Android 的 Android 共享首选项（默认情况下不安全）。然而，有一个使用 Android Keystore 的分支。
28. React Native常见面试题有哪些：什么是网络安全和 SSL 固定？
SSL的理解：
SSL（安全套接字层）及其继承者 TLS（传输层安全）是用于在联网计算机之间建立经过身份验证和加密的链接的协议。
SSL/TLS 的工作原理是通过称为 X.509 证书的数字文档将网站和公司等实体的身份绑定到加密密钥对。每个密钥对由一个私钥和一个公钥组成。私钥是安全的，公钥可以通过证书广泛分发。

了解固定 
固定是一种可选机制，可用于提高依赖 SSL 证书的服务或站点的安全性。固定允许指定访问站点/应用程序的用户应该接受的加密身份
         
为什么我们需要 SSL 固定？
SSL 生态系统的固有风险之一是误发。这是为你控制的域/主机颁发未经授权的证书。这可能发生在公共和私人 PKI（公共密钥基础设施）上

移动应用程序中如何使用 SSL 固定？
当移动应用程序与服务器通信时，它们通常使用 SSL 来保护传输的数据不被篡改。默认情况下使用 SSL 实现，应用程序信任具有操作系统信任存储信任的证书的任何服务器，此存储是操作系统附带的证书颁发机构列表。
但是，使用 SSL 固定时，应用程序被配置为拒绝除一个或几个预定义证书之外的所有证书，每当应用程序连接到服务器时，它都会将服务器证书与固定证书进行比较，当且仅当它们与服务器匹配时受信任并建立 SSL 连接。
29.解释setNativeProps。它是否会产生性能问题以及如何使用它？
React Native面试题解析：有时需要直接对组件进行更改，而不使用 state/props 来触发整个子树的重新渲染。例如，在浏览器中使用 React 时，有时需要直接修改 DOM 节点，移动应用中的视图也是如此。setNativeProps 是 React Native，相当于直接在 DOM 节点上设置属性。
当频繁的重新渲染造成性能瓶颈时使用 setNativeProps。

直接操作不会是你经常使用的工具；你通常只会使用它来创建连续动画，以避免渲染组件层次结构和协调许多视图的开销。setNativeProps 是命令式的，并且将状态存储在原生层（DOM、UIView 等）中，而不是在你的 React 组件中，这使得你的代码更难以推理。在使用之前，请尝试使用 setState 和 shouldComponentUpdate 解决你的问题。
30. React Native常见面试题合集：如何让你的 React Native 应用在动画上感觉流畅？
构建良好的原生应用程序感觉如此流畅的主要原因和重要原因是避免了交互和动画过程中的昂贵操作。React Native 有一个限制，即只有一个 JS 执行线程，但你可以使用 InteractionManager 来确保在任何交互/动画完成后安排长时间运行的工作开始。
应用程序可以安排任务在与以下交互后运行：
InteractionManager.runAfterInteractions(() => { // ...long-running synchronous task... });

    推荐阅读


    上一篇：求职面试总结（操作系统常见面试题和答案合集）

    下一篇：求职面试必备（AWS面试题和答案合集）