React电面复盘

一次的内部rotation的面试，时间大概也在半个小时左右。

React相关

过去一年多都在用React写项目，所以这一块是回答的比较舒服和比较流畅的地方，感觉面试官也是比较满意的样子。

问题列表如下：

• 虚拟DOM了解吗
  传统的MVC项目经常直接更新DOM tree，因此渲染的性能较为低下。Virtual DOM是React的一个特性，它可以算是一个真实的DOM tree的拷贝。但是当React的状态发生改变了之后，它不会第一时间去更新DOM Tree，而是会先在Virtual DOM里面对产生状态的节点进行判断，如果节点真的改变了，React才在页面上进行更新。因此使用了Virtual DOM提升了页面的渲染效率。

• React用的什么版本
  16.8以上，不过项目之中并没有用React Hooks。

• JSX
  React的语法糖，JSX最终还是要编译成JavaScript文件的，但是对于开发者来说JSX的结构更加清晰明确，写出来的代码可读性更高。

• 生命周期
  这里面试官抓了一个componentDidMount问。当时的答复说是这是处在mounting的时候调用的函数，在之前的项目中经常会在componentDidMount检查调用api。

  确实应该好好的复习一下生命周期的函数，得印在脑子里才行。

• React程序跑的很慢怎么办
  可以从这么几个方面解决：

  1. 检查一下所引用的包在地区内是否可以访问，例如国内无法访问谷歌组件，如果不可以访问的话需要更换CDN或者打包到自己的项目之内。
  2. 可以看一下WebPack是怎么打包代码bundles的，有可能有些Bundles特别大，这就导致了页面加载速度过慢。
  3. 可以通过设立子域名，知道目录的话可以加速读取。

  面试完了之后才想起来，除了上面提到的两点，其实还有其他的方法：

  • UI的优化：在拉取数据的时候进行部分组件的渲染，增加加载UI的优化，这样在用户体验感上就不会觉得页面加载时间太久。
  • 数据的半持久化：对于非敏感和非频繁更新信息可以持久在SessionStorage或者LocalStorage之中，这样可以减少数据的交互，提升加载速度。
  • 其他方面，关于非React的优化其实都可以放在React里面去做，例如说优化图片，设置图片的高度和宽度之类的。

• 知道React Router吗
  React Router为React项目提供了路由，因为React是一个SPA（Single Page Application），没有路由的话，普通的访问浏览就无法方便的实现。

• 知道React Context吗
  React Context是React提供的一个组件，用于父组件与子组件的数据传输。
  的确通过props可以将数据从父组件传到子组件之中，但是如果组件与组件的结构层数比较远，那么一遍遍传输props是一个效率比较低下并且容易出错的方法。React提供了Context组件，其中有Provider和Consumer，父组件可以将数据放入Provider之中，子组件可以通过Consumer去获取数据。
  不过项目之中用Redux比较多，毕竟Redux也可以平级获取信息。

• React页面经常更新怎么办

  • 可以在ComponentDidMount()之中确认数据是否已经被获取，然后再决定是否要调用setState()函数去更新状态。
  • 同样也可以使用shouldComponentUpdate()里面确认nextProps和nextState和现在的是否相同，然后返回true去确认更新，false取消更新。不过shouldComponentUpdate()并不是百分百可靠的，有的时候就是会执行强制更新。

  我还说了可以使用pureComponent，不过面试官好像没有听到。

• StrictMode知道吗
  把StrictMode和use strict弄混了，按照use strict去解释的，不过use strict更多的检查代码的作用域、规范性之类的，React的StrictMode管理的是React自己的“违规操作”。官方文档 v17.0.1上目前标注的几点如下：

  • Identifying components with unsafe lifecycles
    即，在异步的项目中，部分legacy lifecycle methods的使用并不安全，而开发人员也并不清楚检查第三方库里面是否使用了legacy lifecycle methods，StrictMode在编译时会生成一列使用legacy lifecycle methods的类组件，并抛出警告。
  • Warning about legacy string ref API usage
    这个也和legacy code有关，string ref已经是legacy code了，StrictMode会检查string ref的使用，并抛出警告，但是目前React仍然会继续支持string ref。
  • Warning about deprecated findDOMNode usage
    当项目内部使用了findDOMNode时抛出警告。
  • Detecting unexpected side effects
    通过二次重复调用生命周期函数去检测当生命周期函数被频繁调用时造成的影响，只在开发环境中使用，生产环境并不会二次调用。
  • Detecting legacy context API
    如题所说，检测legacy context API的使用。

其他Package或者Tech Stack

WebPack

• css processor
  我倒是知道这是一个WebPack的配置，但是具体的没有答出来，只是说了对WebPack不是很了解。

NodeJS

面试官问了，但是对NodeJS并不是非常了解……

Babel

编译器，将JSX转化成浏览器可以读取的JavaScript。

移动开发

有看过React Native的一些文档，不过没有实际的开发经验。

常识性知识

HTML

• 什么是meta tag
  meta tag是HTML的一个标签，可以展示页面的一些关键数据，例如说作者，内容提要等，可以用于提升SEO。
• 什么是html creation
  和面试官的沟通非常重要，我没有搞清楚html creation的定义是什么，所以我问了面试官他对html creation。面试官想问的就是HTML之间不同的tag的区别，他扣细节举例问了div和span的区别。
  div是一个division，将内容划分为一个个的小模块，span主要作用于text，而div可以用于分开超链接、图片等。

CSS

• 什么是psudo-class
psudo-class无法独立存在，例如说:hover, :visited，必须挂靠在某个CSS class之中。
  psudo-class可以极大的提升用户体验，例如说现在大部分的网页，在鼠标落在超链接上，鼠标光标都会变成pointer，这样可以提示用户该超链接可以点击。
• 了解floating吗
  知道。用自己的语言难以表述，因此用了Word文档之中的图片举例。Word文档之中图片插入的时候，必须要选择图片怎么样和文字进行排序。floating起到了同样的功能。
  耍了一个小聪明，不过面试官接受了这个解释。
• 知道media query吗
  Media Query使得页面布局响应式，Media Query可以选择不同的屏幕宽度，从而根据页面的宽度对页面进行适配。

JS

• map函数
  一个JavaScript的循环，不过map在循环体内会返回一个值。

JQuery

刚开始已经说了对JQuery不是很了解，因为之前的项目都是从0开始搭建的React项目，所以都在用React的语法糖去写。不过后面还是问了一个问题。

• jquery("#abc") 是什么意思
  在DOM节点中选择一个id是abc的节点。

  之前把期待值设得很低之后，对于我回答出了这个问题，面试官还蛮惊讶的。
  不过设低期待值还是挺危险的……

其他

• localStorage
  可以持久化一些不是非常敏感，并且不是经常更新的数据。可以通过localStorage.setItem()获取localStorage里面的数据，通过localStorage.getItem()去获取数据。
• cookies和localStorage的区别
  cookies可以允许同源域名访问，localStorage则是所有的页面都可以访问;
  cookies保存的数据比较小，localStorage保存的数据比较大。

  这个回答真的比较干了，也没有完整的描述cookies和localStorage的区别……

总结

在过去的一年里面还是在舒适圈里面呆的太久了，对React比较熟悉之后渐渐的就习惯了搬砖的工作，没有继续对上下游，如NodeJS, MongoDB, ExpressJS, WebPack，等进行更加深入的挖掘和学习；对于HTML、CSS和JavaScript虽然也有在陆陆续续的学习，但是学得很散，没有能够串联起来。

另外好记性不如烂笔头，结束了一个阶段的学习之后进行总结也是非常重要的。