react native 面试题

iMingzhen

已于 2023-05-11 20:58:43 修改

阅读量1.2w

点赞数 8

分类专栏：前端文章标签： ui react native react.js

于 2022-03-28 11:22:08 首次发布

本文链接：https://blog.csdn.net/isKelel/article/details/123784441

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

react native 面试题

1. react native中的ScrollView组件是什么
2. 什么是FlatList，相比于ScrollView有什么区别
3.如何在react native中发起api请求
4. 什么是非受控组件和受控组件
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

更新
2023/5/11
第十三题更新了bridge部分，详细参照 React Native 架构浅析

以下答案为参考了一些资料并思考后汇总，还没想通的就没有写进来，如果有好的回答请在评论区留言~
后续了解更多rn的知识后会补充以及更新

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 的高阶组件连接与商店连接。任何组件都可以调度一个操作，该操作到达化简器并更新存储中的状态。