为了账号安全,请及时绑定邮箱和手机立即绑定

React 基础面试题 - 和你随便聊聊 React

2019.01.17 15:30 1142浏览

在出完慕课网推出两门关于 React 的课之后,有的同学在群里让我出点题测试一下自己的水平,年后准备去面试一下。我主持过一些面试,我每次的态度都是和面试者随便聊聊,没有那么多居高临下的态度。我其实看中的是每个人解决问题和自主学习的能力,就像 Dan Abramov 在他的博客写《2018年他不懂的知识》- https://overreacted.io/things-i-dont-know-as-of-2018/ 你会发现作为一个大神,他也有那么多不懂的知识,我们每个人精力有限,都要承认自己肯定会不熟知的领域。所以这里面的一些问题没有所谓的正确答案,你想到什么都可以写出来。很多人都说面试一个特定的框架或者库是一种很不好的做法,但是既然我们说到了React,我们希望雇佣的是一个有一定 React 经验的工程师,这里只会写 React 的基础问题,不涉及其他框架,比如说 Redux 等等,也不会问 Vitrual DOM 的问题。

1 你是怎么开始学习 React 的,为什么选择它?

随便说,是因为它太火了?每个人都在谈论,还是你发现 React 的工作机会非常多,就想尝试尝试?还是觉得官网做的很好看,很吸引你?还是你的领导要玩新技术,强行让你开始学习?


2 JSX 是什么?我们为什么可以把 HTML 标签写到 JS 文件中?浏览器为啥不报错?你觉得 JSX 针对其他框架的模版字符串有什么优劣?

扩展问题:为什么Component 的名字第一个字母要大写?


3 React 可以用两种方法声明 Component,它们有什么区别?什么情况你会选择哪一种?

扩展问题:如果是 functional Component,为什么我们还要在第一行引入 import React from 'react'? 在这个文件中,应该根本就没有用到 React 的库。


4 简单聊聊什么是声明周期,这里不需要全都非常准确的把它们都说出来,我本人也记不住。只要大体说出几个阶段即可。如果,我要在这个组件中发送一个异步请求,你觉得应该在哪里做最好?为什么?


5 聊聊什么是 单向数据流(one way data flow) 和 状态提升 (lifting state up)? 你觉得 React 这种设计思想和双向绑定 相比,有没有什么优劣?

扩展问题:如果我现在有一个组件设计



现在 button 这个组件要获得 App 组件中的 state 里面的 theme 值,但是现在我要通过单向数据流一直传递下去 App - Header - User - Button ,其中一些组件甚至根本用不到这个值,只是为了传递,你有没有什么方法来解决这种复杂的多层传递问题?


6 这段代码有啥问题?会输出什么内容?

// state.count 初始值为 0
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })
this.setState({ count: this.state.count + 1 })

如果有问题,应该用什么方法来解决?


7 现在有这么两个组件,一个是新闻列表组件,一个是用户列表组件,他们的逻辑都很相似,都要从某个 URL 发送异步请求拉取数据,在读取的时候显示 Loading 图表,数据获取完毕后显示不同的界面结构,你应该怎样设计这两个组件,有没有什么方法把他们重复的逻辑整合,假如我再有一个读取评论列表也可以很快的把逻辑应用进去?




8 项目状态设计,现在有一个 博客的 SPA 项目,有三个页面,一个是首页,是所有文章的列表,一个是 文章详情,点击去以后有一篇文章的详情和这篇文章的评论列表,还有一个是某个分类下面的文章列表,点击进去会显示这个分类下的所有文章,现在请你为这个应用设计总体的状态,请考虑 最小化状态集合,数据的 cache 等等。


9 组件设计:设计一个组件的跑马灯或者说叫轮播图,就是有一组内容,点击左右箭头会来回切换,前端开发者应该都写过类似的东西。请注意你是否可以考虑一下它的可扩展性?比如说轮播的内容可以高度自定义,可以自定义为任何内容,比如说文字,图片,也可以是混排的复杂结构。


10 你在项目中是否写测试?用什么框架和工具来测试 React 组件? 你觉得测试能给你带来什么样的好处?


点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

5人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 去赚学费 帮助中心 APP下载
官方微信

举报

0/150
提交
取消