网站导航
> 文档中心 > 2022 react native 面试题

2022 react native 面试题

网友: 文档中心 2022-03-28 16:01:16

2022 react native 面试题

  • 1. react native中的ScrollView组件是什么
  • 2. 什么是FlatList，相比于ScrollView有什么区别
  • 3.如何在react native中发起api请求
  • 4. 什么是非受控组件和受控组件
    • 4.1 受控组件
    • 4.2 非受控组件
    • 4.3 对比
  • 5. 说说你对高阶函数的理解
  • 6. react native中父子组件的通信如何进行
  • 7. 如何在react native中实现多个屏幕之间的跳转
  • 8. react native中的虚拟dom是如何运作的
  • 9. react native在项目较大时如何管理状态数据
  • 10. react native中如何实现过渡动画
  • 11. react native组件的key属性有什么用
  • 12. react native 和 react 是什么关系
  • 13. react native是怎么做到将js输出成app的，又如何利用js调用ios/android的api

1. react native中的ScrollView组件是什么

ScrollView 组件是一个通用滚动容器，可以承载多个组件和视图。您可以垂直和水平滚动（通过设置 horizontal 属性）。ScrollView 还可用于在 IOS 中实现收缩和缩放功能。在视图之间水平滑动也可以使用 ViewPagerAndroid 组件在 Android 上实现。ScrollView 最适合呈现少量大小有限的内容。ScrollView 的所有元素和视图都将渲染，即使它们当前未显示在屏幕上也是如此。

import React from 'react';import { View, Text, Image, ActivityIndicator, StyleSheet, ScrollView } from "react-native";const initialState = { pictures: [{id:0, download_url:"https://picsum.photos/id/0/5616/3744" },{id:1, download_url: "https://picsum.photos/id/1002/4312/2868"},{id:2, download_url: "https://picsum.photos/id/1006/3000/2000"},{id:3, download_url: "https://picsum.photos/id/1015/6000/4000"}] };class PictureList extends React.Component {    constructor(props) { super(props); this.state = initialState;    }render() { const { pictures } = this.state; if (!pictures.length) { return (<ActivityIndicator />); } return (     <View>  <ScrollView>    {pictures.map(picture => (      <View style={styles.container} key={picture.id}>   <Image style={styles.image} source={{uri: picture.download_url}} />      </View>    ))}     />     </View> );    }}const styles = StyleSheet.create({    container: { borderColor: '#ccc', borderWidth: 1, borderRadius: 5, backgroundColor: '#eaf7fd', marginBottom: 15,    },    image: { margin: 5, borderRadius: 5, width: 300, height: 300,    }});export default PictureList;

上面的示例在 ScrollView 中呈现图像列表。我们从 react-native 库中导入 ScrollView 组件，并在 ScrollView 中创建了 Image 元素。每个 Image 元素都有自己的宽度和高度，通过 CSS 设置。当您运行上述代码并滚动屏幕时，您应该能够浏览所有图像渲染。滚动视图用于在移动应用程序上创建可滚动的 UI。它适用于IOS和Android。

2. 什么是FlatList，相比于ScrollView有什么区别

React native 提供了 FlatList 组件来显示长列表。

FlatList 适用于长数据列表，其中项目数可能会随时间而变化，比如我们常见的滚动到底部加载更多。

与适用更多场景的 ScrollView 不同，FlatList 只渲染屏幕上的可见元素，而不是列表中的所有元素。因此FlatList 比 ScrollView 性能更高，因为列表内的元素只有在进入屏幕可视区域时才会渲染，而ScrollView是全部渲染。

3.如何在react native中发起api请求

我们可以使用javascript的api > fetch来进行请求

async function getPic(){    const api = 'https://picsum.photos/v2/list';    const fetchResponse = await fetch(api);    // 拿到结果    const pictures = await fetchResponse.json();}

4. 什么是非受控组件和受控组件

4.1 受控组件

在 HTML 中，表单元素（如、 和 ）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。

4.2 非受控组件

非受控组件将真实数据储存在 DOM 节点中，因此在使用非受控组件时，有时候反而更容易同时集成 React 和非 React 代码。如果你不介意代码美观性，并且希望快速编写代码，使用非受控组件往往可以减少你的代码量。否则，你应该使用受控组件。

4.3 对比

简而言之，组件的状态由可控的数据管理，则为受控组件，如果组件的状态没有可控的数据管理，则为非受控组件

5. 说说你对高阶函数的理解

高阶函数的基本定义是，如果函数接受一个函数作为参数或返回另一个函数，则该函数称为高阶函数。

高阶函数的好处在于方便我们多次复用一部分代码来实现功能，我们也可以通过函数柯里化的方式来实现高阶函数，这里简单说下什么是函数柯里化(currying)
让我举个例子：

function multiplyBy(a) {return function(b) {return a * b;};}

此函数是高阶函数，因为它返回一个新函数。此函数将充当不同功能的函数生成器。例如，我可以使用上面的高阶函数创建一个计算双倍值的函数：

const double = multiplyBy(2);console.log(double(4)) //result: 8

类似地，我可以使用相同的高阶函数来生成一个三倍值函数，该函数将数字作为参数并返回三倍于数字。

const triple = multiplyBy(3);console.log(triple(4)) //result: 12

这种类型的函数生成在javascript中被称为柯里化(currying)。这是一种很不错的开发方式，因为这可以把基本逻辑和最终要实现的逻辑分离。基本逻辑可以在多个地方复用。

6. react native中父子组件的通信如何进行

7. 如何在react native中实现多个屏幕之间的跳转

移动应用程序包含多个屏幕，并且必须有一种方法可以在应用程序中的多个屏幕中导航。管理多个屏幕的显示和之间的转换通常由所谓的导航器处理。React Navigation提供了一个易于使用的导航解决方案，能够在iOS和Android上呈现常见的堆栈导航和选项卡式导航模式。

8. react native中的虚拟dom是如何运作的

Virtual DOM由React核心团队成员Pete Hunt推广。React 通过使用这个术语来解释其性能方面。他们解释说，DOM操作始终是一个繁重的操作，因为浏览器重排，重绘事件由DOM操作触发。浏览器需要根据即将发生的更改重新计算元素的位置。为了优化此浏览器操作，ReactJS 尝试最大程度地减少 DOM 操作操作。React 创建一个内存中数据结构缓存，计算结果差异，然后有效地更新浏览器显示的 DOM。这允许开发人员编写代码，就好像每次更改时都会呈现整个页面一样，而 React 库仅呈现实际更改的子组件。这就是 React 通过将数据结构保留在内存中来增加空间复杂性的方式，但通过减少更新的 DOM 操作次数来降低处理成本，从而实现实际的 DOM。

9. react native在项目较大时如何管理状态数据

在 React 中，我们遵循组件驱动开发，这意味着我们将编写几个有状态或无状态的组件，并将它们组合在一起以构建整个应用程序。如果应用程序越来越大，那么在很多情况下，一个组件想要访问任何其他组件的状态。实现此目的的一种方法是将依赖组件作为同一父组件的子组件，然后可以通过回调进行通信。

这些解决方案适用于小型应用程序，但对于大型应用程序，将回调从父元素传递到最里面的子元素很麻烦。这就是Redux的用武之地。Redux 是一个流行的库，用于有效地维护和管理大型 React 原生应用程序的状态。它提供了一个存储，该存储保持应用程序级状态，开发人员需要编写操作和化简器来修改存储中的状态。任何组件都可以通过使用 Redux 的高阶组件连接与商店连接。任何组件都可以调度一个操作，该操作到达化简器并更新存储中的状态。

10. react native中如何实现过渡动画

11. react native组件的key属性有什么用

12. react native 和 react 是什么关系

React：
React 是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页。
React.js:
在React框架之上，发展出了React.js 框架来开发网页。
React Native：
在React框架之上，发展出来React Native 用来开发移动应用。

所以要写react native势必要先学会react的使用和理念

13. react native是怎么做到将js输出成app的，又如何利用js调用ios/android的api

bundle打包机制

bridges

JS Engine

网络标签：

相关问题