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 虽然也有在陆陆续续的学习，但是学得很散，没有能够串联起来。

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