最新React Native面试题和答案合集

下面列出了一些常见的React Native面试问答。

1)解释React Native？

React Native是Facebook引入的开源JavaScript框架。它用于为iOS和Android平台开发真实的本机移动应用程序。它仅使用JavaScript来构建移动应用程序。就像React, 它使用本机组件而不是使用Web组件作为构建块。它是跨平台的, 允许你编写一次代码, 并且可以在任何平台上运行。

React Native应用程序基于React(一种由Facebook开发的JavaScript库和XML-Esque标记(JSX))来创建用户界面。它针对移动平台而不是浏览器。它可以节省开发时间, 因为它允许你使用针对Android和iOS平台的单一语言JavaScript来构建应用程序。

2)React Native有什么优势？

React Native为构建移动应用程序提供了许多优势。下面给出了使用React Native的一些基本好处：

• 跨平台：它提供了”编写一次并随处运行”的功能。它用于为Android, iOS和Windows平台创建应用。
• 性能：用React Native编写的代码被编译成本机代码, 从而使所有操作系统都可以在所有平台上以相同的方式提供更接近的本机外观和功能。
• 社区：React Native提供了一个由热情的开发人员组成的庞大社区, 他们随时准备帮助我们修复错误, 问题随时出现。
• 热重载：在开发过程中立即可以看到应用程序代码中的一些更改。如果更改业务逻辑, 则会将其反映实时重新加载到屏幕上。
• 加快开发速度：React Native有助于快速开发应用程序。它使用通用语言来构建适用于Android, iOS和Windows平台的应用程序, 从而加快了应用程序的部署, 交付和上市时间。
• JavaScript：JavaScript知识用于构建本机移动应用程序。

3)React Native的缺点是什么？

下面给出了React Native在构建移动应用程序方面的一些主要缺点：

• React Native仍然是新的且不成熟：React Native是Windows, Android和iOS编程语言中的新框架。它仍处于改进阶段, 可能会对应用程序产生负面影响。
• 学习困难：React Native无法快速学习, 尤其是对于应用程序开发领域的新手而言。
• 它缺乏安全性鲁棒性：React Native是一个开放源代码的JavaScript框架, 它很脆弱, 并且在安全性鲁棒性方面造成了差距。在创建数据高度机密的银行和金融应用程序时, 专家建议不要选择React Native。
• 初始化需要花费更多时间：即使使用高科技的小工具和设备, React Native也会花费大量时间来初始化运行时。
• 存在是不确定的：随着Facebook开发此框架, 它的存在是不确定的, 因为它保留了随时终止该项目的所有权利。随着React Native的流行, 这种情况不太可能发生。

4)列出React Native的基本组件。

这些是React Native的核心组件：

• 视图：它是用于构建移动应用程序UI的基本内置组件。该视图类似于HTML中的div。这是一个内容区域, 你可以在其中显示内容。
• 状态：用于控制组件。变量数据可以存储在状态中。这是可变的, 表示状态可以随时更改该值。
• 道具：道具用于将数据传递到不同的组件。这是不可变的, 表示道具无法更改值。它提供了容器组件和表示组件之间的连接。
• 样式：它是Web或移动设备中必不可少的组件, 使应用程序更具吸引力。 React Native不需要任何特殊的语言或语法来进行样式设置。它可以使用JavaScript对象为应用程序设置样式。
• 文字：此组件在应用程序中显示文字。它使用基本组件textInput从用户那里获取文本输入。
• ScrollView：这是一个用于容纳多个视图的滚动容器。它可用于通过滚动条在视图中呈现大型列表或内容。

5)在React Native中运行多少个线程？

React Native应用程序包含以下线程：

• React Native UI线程(主线程)：此线程用于移动应用程序的布局。
• React Native JavaScript线程：这是运行我们的业务逻辑的线程。这意味着JS线程是执行我们的JavaScript代码的地方。
• React Native Modules Thread：有时候, 我们的应用需要访问平台API, 这是Native Module线程的一部分。
• React Native Render Thread：此线程用于生成用于绘制应用程序UI的实际OpenGL命令。

6)什么是React Native Apps？

React Native Apps不是Web应用程序。这些类型的应用程序正在移动设备上运行, 并且无法通过浏览器加载。而且, 它们不是可在WebView组件上运行的基于Ionic, Phonegap等构建的混合应用程序。它们是使用单一语言JavaScript构建的真正的本机应用程序, 并具有可在移动设备上运行的本机组件。

7)列出创建和启动React Native App的步骤？

以下步骤是创建和启动React Native应用程序所必需的：

步骤1：安装Node.js

步骤2：使用以下命令安装本地React环境。

$ npm install -g create-react-native-app

步骤3：使用以下命令创建一个项目。

$ create-react-native-app MyProject

步骤4：接下来, 使用以下命令浏览项目。

$ cd MyProject

步骤5：现在, 运行以下命令以启动项目。

$ npm start

要了解更多信息, 请单击此处。

8)React Native中的状态是什么？

用于控制组件。变量数据可以存储在状态中。这是可变的, 表示状态可以随时更改该值。

例子

在这里, 我们将使用状态数据创建一个Text组件。每当我们单击文本组件时, 其内容都会更新。事件onPress调用setState函数, 该函数使用” myState”文本更新状态。

import React, {Component} from 'react';  
import { Text, View } from 'react-native';  
  
export default class App extends Component {  
    state = {  
        myState: 'This is a text component, created using state data. It will change or updated on clicking it.'  
    }  
    updateState = () => this.setState({myState: 'The state is updated'})  
    render() {  
        return (  
            <View>  
                <Text onPress={this.updateState}> {this.state.myState} </Text>  
            </View>  
        );  
    }  
}

要了解更多信息, 请单击此处。

9)React Native中有哪些道具？

React Native组件的属性被称为props。它们用于将数据传递到不同的组件。在React Native中, 几个组件在创建时使用不同的参数进行了自定义, 这些参数称为props。这是不可变的, 表示道具无法更改值。它提供了容器组件和表示组件之间的连接。

例子

在这里, 我们创建了带有消息属性的Heading组件。父类App将prop发送到子组件Heading。

// Parent Component
export default class App extends Component {
  render () {
    return (
     <View style={{alignItems: 'center' >
     	 <Heading message={'Custom Heading for Parent class?}/>
     </View>
    )
  }
}

// Child component
export default class Heading extends Component {
  render () {
    return (
      <View style={{alignItems: 'center' >
        <Text>{this.props.message}</Text>
      </View>
    )
  }
}
const styles = StyleSheet.create({  
   welcome: {  
    fontSize: 30, }  
});
Heading.propTypes = {
  message: PropTypes.string
}
Heading.defaultProps = {
  message: 'Heading One'
}

要了解更多信息, 请单击此处。

10)列出React Native的用户？

如今, 市场上有成千上万的React Native内置应用程序可用。以下是使用React Native应用程序的用户列表：

• 脸书
• Facebook广告管理器
• Instagram的
• F8
• 制作的Airbnb
• Skype的
• 特斯拉
• 彭博社
• 陀螺仪
• 妙特拉
• UberEats

11)所有React组件都可以在React Native中使用吗？

React Web组件使用DOM元素(例如div, h1, 表等)在UI上显示。但是, React Native不支持这些组件。你将需要找到专门针对React Native的库或组件。很难找到支持这两种功能的组件。但是, 应该很容易弄清楚给定的组件是否为React Native所用。因此, 很清楚所有组件都不能在React Native中使用。

12)虚拟DOM如何在React Native中工作？

虚拟DOM是一个轻量级的JavaScript对象, 它是真实DOM的内存表示形式。这是调用渲染函数和在屏幕上显示元素之间的中间步骤。它类似于节点树, 它列出了元素, 它们的属性以及作为对象及其属性的内容。渲染功能创建React组件的节点树, 然后响应于由用户或系统执行的各种操作导致的数据模型中的突变来更新此节点树。

虚拟DOM分为三个步骤：

• 每当React App中的任何数据发生更改时, 整个UI都会以虚拟DOM表示形式重新呈现。
• 现在, 将计算先前的DOM表示和新的DOM之间的差异。
• 一旦计算完成, 实际DOM仅使用那些已更改的内容进行更新。

13)我们可以在React Native中结合本地iOS或Android代码吗？

是的, 我们可以将本地iOS或Android代码与React Native结合在一起。它可以合并用Objective-C, Java和Shift编写的组件。

14)我们是否为Android和iOS使用相同的代码库？

是的, 我们可以为Android和iOS使用相同的代码库, React负责所有本机组件的翻译。例如, React Native ScrollView在Android上使用ScrollView, 在iOS上使用UiScrollView。

15)React Native中的元素和组件有什么区别？

React Native中的Element和Component之间的区别是：

16)React和React Native有什么区别？

React和React Native之间的本质区别是：

• React是一个JavaScript库, 而React Native是基于React的JavaScript框架。
• 标签在两个平台中的使用方式可能不同。
• React用于开发UI和Web应用程序, 而React Native可用于创建跨平台的移动应用程序。

要了解更多信息, 请单击此处。

17)React Native和Ionic有什么区别？

React Native和Ionic之间的本质区别是：

• Ionic是典型的混合开发框架。它主要侧重于前端用户体验或UI交互, 可处理应用程序的所有外观。它易于学习, 并且可以与其他库或框架(例如Angular, React, Cordova等)集成。其目的是编写一次即可在任何地方运行。
• React Native是Facebook开发的一个开源JavaScript框架, 用于构建跨平台的移动应用程序。它用于开发适用于iOS, Android和Windows的移动应用程序。 React Native与React相同, 但是它使用本地组件而不是使用Web组件作为构建块。它针对移动平台而不是浏览器。它的目的是学习一次, 随处写。

要了解更多信息, 请单击此处。

18)React Native和Native(Android和iOS)之间有什么区别？

React Native允许你编写一次并在任何地方运行。这意味着我们可以在Android和iOS平台上重用React Native代码。因为我们可以在两个平台之间重用大多数React Native代码, 但是Android和iOS是不同的系统。在这里, 我们将看到这些差异。

操作系统

你可以使用React Native来为Android和iOS构建应用程序, 但是如果你在Windows系统上工作, 要检查该应用程序是否在两个系统上都工作并不容易。 Windows不允许运行XCode及其模拟器, 后者是macOS应用。还有其他可用工具, 但它们不是官方的。

本机元素

这些元素对React Native和Native应用程序执行不同的操作。 React Native应用程序使用React Native库中的元素, 而Native应用程序不使用React Native库中的元素。

特定样式阴影

在跨平台应用程序上工作时, Shadows样式是iOS和Android之间差异的重要术语。 Android不支持阴影；取而代之的是, 它使用了height属性。

链接库

有时我们想在我们的应用程序中使用第三方库。在大多数情况下, 我们将其添加为依赖项, 但有时需要手动链接才能添加库。对于Web或本机应用程序的开发人员而言, 手动链接库并非易事。由于React Native处于改进阶段, 因此库文档不会根据最新框架进行更新。

React Native与Native(Android和iOS)

19)React Native和Xamarin有什么区别？

React Native和Ionic之间的本质区别是：

• React Native是Facebook开发的一个开源JavaScript框架, 用于为iOS, Android和Windows构建一个跨平台的移动应用程序。 React Native与React相同, 但是它使用本地组件而不是使用Web组件作为构建块。它针对移动平台而不是浏览器。它的目的是学习一次, 随处写。
• Xamarin是一个开放源代码, 跨平台的开发框架, 可为你提供使用C＃语言构建android, iOS, Windows和Mac应用程序的功能。它由Xamarin Company于2011年5月首次推出。 2016年, 微软签署了收购Xamarin的协议。

要了解更多信息, 请单击此处。

20)StyleSheet.create是做什么的？

在React native中, StyleSheet.create()确保值是不可变的和不透明的。它们仅用于通过桥发送一次样式, 以避免传递新的样式对象。

21)React Native中使用了什么XH​​R模块？

在React Native中, XHR模块用于实现XMLHttpRequest。它是与远程服务进行交互的对象。该对象由前端和后端两部分组成, 其中前端允许在JavaScript中进行交互。它将请求发送到XHR后端, 后者负责处理网络请求。后端部分称为网络。

22)React Native是本机移动应用程序吗？

是的, React Native是本机移动应用程序, 它使用本机应用程序组件编译本机移动应用程序。它既不是使用WebView来运行HTML5应用程序的混合移动应用程序, 也不是移动网络应用程序。 React Native框架构建了一个真正的移动应用程序, 这与使用Objective-C / Swift或Java构建的应用程序没有区别。

23)React Native使用哪种语言？

React Native中使用的语言是Android应用程序的Java和iOS应用程序的Objective-C / Swift。

24)React Native中的样式是什么？

它是Web或移动设备中必不可少的组件, 这使应用程序更具吸引力。 React Native不需要任何特殊的语言或语法来进行样式设置。它可以使用JavaScript对象为应用程序设置样式。

要了解更多信息, 请单击此处。

25)React Native中的引用是什么？

React ref是有用的功能, 可让你直接在React中访问DOM元素或组件的实例。在你要更改组件的子代而无需使用道具或重新渲染整个组件的情况下, 它很方便。

要了解更多信息, 请单击此处。

26)为什么React Native应用使用键？

密钥是唯一的标识符。它们用于标识哪些项目已更改, 更新或从列表中删除。它应该始终在数组内部使用。

要了解更多信息, 请单击此处。

27)React Native中的HOC是什么意思？

HOC代表高阶组件。这是一项技术, 使你可以重用组件逻辑。它是一个接受组件并返回新组件的函数。

语法

const NewComponent = higherOrderComponent(WrappedComponent);

28)InteractionManager的含义是什么, 为什么重要？

InteractionManager是React Native中的一个本机模块, 负责在完成交互之前区分函数的执行。要处理此延迟, 我们需要调用InteractionManager.runAfterInteractions(()=> {…})。

InteractionManager很重要, 因为React Native有两个线程。第一个是JavaScript UI线程, 它处理屏幕上的图形更新, 第二个线程用于所有任务, 而不是UI线程。由于React Native只有一个线程来进行UI更新, 因此它可能会过载并丢帧, 尤其是在导航屏幕动画中。因此, 开发人员可以使用InteractionManager来确保在发生这些动画之后执行该功能。因此, 我们不会在UI线程上放置框架。

29)类和功能组件之间有什么区别？

类组件和功能组件之间的本质区别是：

语法：两个组件的声明不同。功能组件接受道具, 并返回React元素, 而类组件则需要从React扩展。

//Functional Component
function WelcomeMessage(props) {  
  return <h1>Welcome to the , {props.name}</h1>;  
} 

//Class Component
class MyComponent extends React.Component {  
  render() {  
    return (  
      <div>This is main component.</div>  
    );  
  }  
}

状态：类组件具有状态, 而功能组件是无状态的。

生命周期：类组件具有生命周期, 而功能组件没有生命周期。

30)什么时候你更喜欢类组件而不是功能组件？

当组件具有状态和生命周期时, 我们更喜欢使用类组件。否则, 应使用功能组件。

31)React Native如何处理不同的屏幕尺寸？

React Native提供了多种处理屏幕尺寸的方法。其中一些如下：

1. Flexbox：用于在不同屏幕尺寸上提供一致的布局。它具有三个主要属性：

• flexDirection
• 证明内容
• alignItems

2.像素比率：用于使用PixelRatio类访问设备像素密度。如果我们在高像素密度的设备上, 我们将获得更高分辨率的图像。

3.尺寸：用于处理不同的屏幕尺寸并精确设置页面样式。它仅需编写一次代码即可在任何设备上工作。

4. AspectRatio：用于设置高度, 反之亦然。 AspectRatio仅存在于React-Native中, 而不存在于CSS标准中。

5. ScrollView：这是一个滚动容器, 其中包含多个组件和视图。可滚动项目可以垂直和水平滚动。

32)什么是ListView？

ListView是React Native的核心组件, 它包含项目列表并以垂直滚动列表显示。

要了解更多信息, 请单击此处。

33)什么是React Native最好的UI组件？

React Native的最佳UI组件是：

• UI材料
• 语义UI
• React Bootstrap
• React工具箱
• 蚂蚁设计

34)React和React Native之间有什么相似之处？

React和React Native之间最常见的相似之处是：

• React生命周期方法
• React组件
• React状态和道具
• Redux库

35)React Native中的动画是什么？

动画是一种方法, 其中图像被操纵为显示为运动对象。 React Native动画允许你添加额外的效果, 从而在应用程序中提供出色的用户体验。我们可以将其与React Native API, Animated.parallel, Animated.decay和Animated.stagger一起使用。

React Native有两种类型的动画, 如下所示。

• 动画的：此API用于控制特定值。它具有用于控制基于时间的动画执行的启动和停止方法。
• LayoutAnimated：此API用于对全局布局事务进行动画处理。

要了解更多信息, 请单击此处。

36)React Native如何将数据加载到服务器上？

React Native使用Fetch API来获取数据以满足网络需求。

37)React Native中的存储系统是什么？

React Native存储是一个简单, 未加密, 异步, 持久的系统, 可将数据全局存储在应用程序中。它以键值对的形式存储数据。 React Native提供了AsyncStorage类来全局存储数据。使用AsyncStorage类, 我们需要一个数据备份和同步类。这是因为保存在设备上的数据不是永久的, 也没有加密。

要了解更多信息, 请单击此处。

38)你可以通过React Native在现有应用程序中集成更多功能吗？

是的, 我们可以在React Native中向现有应用程序添加新功能。

39)手势响应器系统是什么意思？

它是React Native的内部系统, 负责管理系统中手势的生命周期。 React Native为用户提供了几种不同类型的手势, 例如轻击, 滑动, 滑动和缩放。响应者系统协商这些触摸交互。通常, 它与Animated API一起使用。另外, 建议它们不要产生不可逆的手势。

40)React Native Packager在React Native中做什么？

React Native Packager执行以下功能：

• React Native Packager将你应用程序的所有JavaScript代码组合到一个文件中, 然后翻译你的设备无法理解的任何JavaScript代码(例如JSX)。
• 它还会将项目中使用的资产(例如PNG文件)转换为对象, 这些对象可以由Image组件显示。

41)为什么React Native使用Redux？

Redux是JavaScript应用程序的状态容器。它是一种状态管理工具, 可帮助你编写行为一致, 可以在不同环境中运行且易于测试的应用程序。

React Native使用Redux, 因为它允许开发人员将一个应用程序状态用作全局状态, 并可以轻松地与任何React组件中的状态进行交互。它可以与任何框架或库结合使用。

42)如何用最新版本更新React Native？

用最新版本升级现有React Native非常重要, 这使你可以访问更多API, 视图, 开发人员工具和其他最新功能。需要执行以下步骤以将React Native升级到最新版本。

1.使用最新版本的react-native, react和expo包升级package.json中的expo项目。

2.设置最新版本的SDK, 该版本与app.json文件中的最新react-native兼容。

3.使用以下命令升级React Native CLI以更新源文件。

$ react-native upgrade

4.安装升级帮助程序Web工具, 该工具可在任何两个版本之间升级你的应用程序。

5.通过运行以下命令来升级项目文件。

$ react-native init

6.最后, 你需要执行故障排除活动以使用React Native CLI进行升级。

43)React Native中的API是什么？

API或应用程序编程接口是一种软件中介, 可以使两个应用程序相互通信, 而不必知道它们是如何实现的。有时, 它被视为合同, 其文档代表了两方之间的协议。例如, 每次当你在Facebook之类的移动设备上使用某个应用程序时, 它都会发送一条消息, 或者当你在手机上看到天气时, 这些都是使用API​​。

React Native使用Fetch网络API来满足我们的需求。它只是通过Fetch调用URL, 然后根据需要向服务器发出请求。 React Native API主要使用三种生命周期方法, 分别是构造函数, componentDidMount和Render。

44)如何在React Native中使用Axios？

Axios是一个流行的库, 用于从浏览器发出HTTP请求。它使我们能够从浏览器发出GET, POST, PUT和DELETE请求。因此, React Native使用Axios向API发出请求, 从API返回数据, 然后在React Native应用程序中对该数据执行操作。通过使用以下命令将Axios插件添加到我们的项目中, 我们可以使用Axios。

# Yarn
$ yarn add axios

# npm
$ npm install axios --save

Axios具有以下功能：

• 它从浏览器发出XMLHttpRequests。
• 它从React Native框架发出Http请求。
• 它支持大多数React Native API。
• 它提供了客户端功能, 可以保护应用程序免受XSRF的侵害。
• 它使用浏览器自动转换响应和请求数据。

45)哪个数据库最适合React Native？

React Native最受欢迎的数据库是SQLite数据库。

46)如何在响应本机中使用firebase？

Firebase是用于移动和Web应用程序开发平台的流行工具。它提供了许多服务, 可帮助你构建快速, 高质量的应用程序, 扩大用户群并在不管理基础架构的情况下赚更多的钱。它是功能强大的数据库即服务(DBaaS)工具, 它提供了可伸缩的云数据库来存储和同步数据, 以进行客户端和服务器端开发。 Firebase的一些关键功能是身份验证, 实时数据库, 云消息传递, 崩溃报告和分析。 Firebase是一种免费增值模型, 而不是开源模型。但是, 你可以免费使用其服务, 直到你不超过其免费套餐的限制。

我们可以通过以下步骤开始使用Firebase：

• 首先, 登录到Firebase控制台, 然后创建一个项目。
• 从控制台检索apikey, authDomian, DatabaseURL和存储桶。
• 接下来, 你需要创建一个新的React Native项目
• 从NPM安装Firebase插件
• 将Firebase插件添加到React Native项目中

React Element是一个简单的对象, 它描述DOM节点及其属性或属性。这是一个不可变的对象, 你无法在其中应用任何方法。

例如：

<button className = "green"></button>

语言

调试器

使用者

面试技巧

公司面试问题与程序

Java基础面试问题

Servlet面试问题

春季面试问题

PL / SQL面试问题

Oracle面试问题

jQuery面试问题