react native 面试题

慕容康安

2023-12-01

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

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
这是一个中间层，用来连接JavaScript线程和Native线程，实现数据和命令的传递和处理。Bridge使用序列化和反序列化的方式来编码和解码消息，并使用消息队列来缓存和发送消息。

Bridge是异步多，不会阻塞任何一方的执行，但消息多了也会影响性能。

同时也是一个单向的，它只能从一方向另一方发送消息，而不能同时进行双向通信。所以需要一种协议来规范消息的格式和含义，以及一种机制来实现回调和错误处理。

更多关于Bridge请参照另一边博文
React Native 架构浅析

JS Engine