记一次react native面试

4,300 阅读9分钟

这是我参与8月更文挑战的第2天,活动详情查看:8月更文挑战

1、在页面上隐藏元素的方法有哪些?

解析

首先我们要从多个纬度来回答这个问题,首先要根据你所面试的技术栈来回答。我们知道现在主流的2个前端框架Vue和React,其实都是基于虚拟节点来实现的。在回答这个问题的时候,先回答在不同的技术栈如何去隐藏元素。然后,阐述不同的隐藏方式他们都是怎么操作虚拟节点的。

答案

css可以使用visibility属性

visible默认值。元素是可见的。
hidden元素是不可见的。
collapse当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 "hidden"。
inherit规定应该从父元素继承 visibility 属性的值。

在vue中

我们可以使用:v-if、v-show。差异:v-if是操作元素的DOM节点创建元素和删除元素;v-show是操作元素的display属性。使用的场景:如果是单纯的元素显示隐藏不会涉及到权限、安全、页面展示的情况下一般使用v-show如果涉及到权限、安全、页面展示的情况下用v-if

react

目前我都是用三元运算符做的,希望大哥补充。

react native

目前我都是用三元运算符做的,希望大哥补充。

2、如何使用flex实现三栏布局,两边固定,中间自适应。

解析

个人感觉这道题主要就是考察你手写代码的能力。只要你写出了关键的 justifyContent、flex、 justifyContent:'space-between' 等你在编写代码时关键的单词都算你过的。笔者当时写的时候一脸懵逼。

答案

    <View style={{ flex:1,flexDirection:'row',justifyContent:'space-between', }}>
        <View style={{backgroundColor:"red",flex:2}} />
        <View style={{backgroundColor:'black',flex:4}} />
        <View style={{backgroundColor:'yellow',flex:2}} />
      </View>

3、何时在javascript中使用reduce()、map()、foreach()和filter()

解析

这道题目就是考察各位的JavaScript基础了。

答案

reduce()reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

map()、foreach()都是用于遍历List、Array

filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

4、 什么是promise?有哪几种状态?

解析

通过回答这个问题,对方其实就可以评判出你到底是个怎样的水平了。

初级、中级答案:

使用Promise让代码更加容易阅读,书写起来也更加的方便。Promise 对象代表一个异步操作,有三种状态:pending: 初始状态,不是成功或失败状态。fulfilled: 意味着操作成功完成。rejected: 意味着操作失败;

Promise.all 方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。特别适合使用在遍历种,进行的耗时操作。但是却要想要一次性返回所有结果。

//处理多个视频,返回处理后的视频路径集合
export const compressList = async (filePathList: []) => {
  // -i ${ this.state.path } -r 20 /sdcard/$MuMu共享文件夹/1111.mp4
  let fileList: any[] = [];
  await filePathList.map((item: any) => {
    fileList.push(
      new Promise((resolve, reject) => {
        compress(item.path);
      })
    );
  });

  await Promise.all(fileList)
    .then(function (posts) {
      console.log(111111111);
      console.log(posts);
    })
    .catch(function (reason) {
      console.log(reason);
    });
};

高级回答方式:

高级也不需要看我的文档了,我也不是高级,也不敢说精通。这里大概给个思路,就是先回答照着上面回答一下。完了补充说明,在没有promise以前,都是怎么做的。promise底层实现原理,自己有看过promise的源码,源码第多少行,哪个方法是怎么写的,为什么这么写。

5、 是否遇到setState数组或对象不会刷新的情况,如果遇到你是怎么解决的。

解析:

这个问题也是很容易让别人,知道你的底细的一个问题。可能我们普通人可能就会简单的回答个:使用setState的回调来处理这个问题。可能更好一点会补充说明一下,在函数式组件中使用useEffect的副方法来处理这个问题。如果,你回答到这里那么你也就时一个初级或者中级程序员。如果,你面试的时高级的话,那么你还需要补充说明在setState后发生了什么?反正我是说不清楚,想要知道的参考这里:React setState 之后发生了什么?

6、自己有没有封装过什么组件?简单举例

解析:

这个问题也是一个别人特别容易评估你的水准的题目? 考察你对于RN原生组件、API的熟悉程度、考察你对常用社区组件的了解程度、考察你到底有没有写过组件。

我的答案:

首先在封装组件时,我们需要考虑这个组件到底是写成函数式组件,还是组件。如果,说这个组件内部不需要向后端发起API请求,那么我一般是写成函数式的。这样代码更加简介,同时从性能上来说也更加的高效。在实际开发过程中我有基于社区的react-native-video封装视频播放组件;有基于react-native-image-core-pick封装图片选择、视频选择组件。并在视频选择的组件的android端,从Android原生底层基于FFmpegKit,实现了对选择的视频进行压缩的功能。为什么在Android端需要自己去从底层开始实现视频压缩呢?因为,社区开源的视频压缩组件react-native-video-processin在Android端好像是有bug。没办法在github上面找到这个仓库,把它的issue看了个遍,的确是有这个问题。就只能自己造轮子了。

7、箭头函数有什么用?

解析:

这个问题也是一个特别重要的问题。可能大多数人,只会说使用箭头函数解决了指向的问题,让代码更加容易阅读了。我就是这样回答的。但其实我知道这个问题,是一个你可以开始吹牛逼的机会,你牛逼吹得好。你就是P7、P8。#参考:JavaScript 箭头函数究竟是什么?

8、React Native 中Redux有什么用?

解析:

这也是一个很重要的问题,通过回答这个问题别人可以知道划分你是精通、还是熟悉。

普通回答:

redux 提供了全局的状态管理,通过使用redux可以很方便的在多个页面间共享数据。主要有由3个部分组成:action、reducers、store。在页面中通过引入react-redux'中的connectredux中的bindActionCreators`将state和编写的函数绑定到页面中,方便调用。

高级回答

你需要描述一下redux的底层实现原理,数据是如何修改的。参考:redux官方中文网站

9、FlatList和ScrollView的区别

解析:

这里考察你对RN官方组件的熟悉程度了。

答案:

FlatList和ScrollView其实最大的区别就是在渲染上的区别。ScrollView会一次性的把所有内容全部渲染出来,而FlatList会惰性渲染子元素,只在它们将要出现在屏幕中时开始渲染。他们都是基于VirtualizedList的一个封装。

10、什么是React Hook?

解析:

这个问题其实就在问你,怎么用函数式的方式去写页面,如何在函数式的页面中发起API请求。我们在平时开发用得最多的就是useState和useEffect,基本上你把这2个说出来了就问题不大了。如果,这个页面需要发起api请求大多都更加习惯用类的方式类写。关于这个hook请参考:React Hooks 详解

11、什么是InteractionManager

答案:

InteractionManager

12、为什么要使用StyleSheet.create?

解析:

我觉得问这个问题,其实是向了解你是否有良好的编码习惯。在实际开发过程中,应该大家都喜欢写行内吧!只有那种高度重复的样式我们才会提出来吧!反正,我个人是感觉这玩意有点影响代码阅读。我一般都写行内,并不会专门的把样式写到StyleSheet.create里面。

12、总结

1、前言

硬实力的大哥就不用看了,搞IT的真的就是靠本事吃饭。不怕你要得多,就怕你不行。你不需要这些面试技巧。

2、沟通的注意事项

在实际面试过程中,面试官可能会问你很多其他问题,知道的你就回答,不会的就直接说不会。在整个交谈过程中,你需要适当的主导整个交流的方向;同时,也要主动的让对方把握节奏。说人话就是:如果你自己真的很牛逼,比面试官还牛逼那你一定要谦虚。谁都不想招个大哥进来,完了自己被干掉吧!

3、待遇的注意事项

1、如果说,你去面试公司对方招聘上写的10-15。那么,一般来说对方可能就是想10招一个中级,15招一个精通(能说得清楚框架底层实现)。

2、如果公司实在繁华地带或者是标准的软件园里面,那么我们一般都是是按照最高的价格要。如果,是在居民楼或者是个不知道什么地方的旮旮角角。如果,你很想进这个公司。那么你就直接按照招聘的最低价要吧!

4、其他

在面试的过程中,对方如果对你有想法的话。肯定会想方设法的提出各种各样的问题,把你问懵逼。紧接着一般会说,我们对这个岗位的要求是精通啥的。这个时候,就是你要价的时候。我只能说兄弟你不要慌。