面试题1

[louzhedong]

1.React中setState函数第二个参数的作用

答：setState的第二个参数是一个回调函数，因为setState有可能是异步的。

2.React 中 shouldComponentUpdate怎么优化性能

答：shouldComponentUpdate对比旧的state,props和新的state,props。

shouldComponentUpdate会被非常频繁的调用，如果其中有很多复杂的运算，则会严重影响性能。

如果组件拥有的属性是基础类型的，直接比较即可。

React.PureComponent也是通过props和state的浅比较来判断是否渲染。

如果属性是一个对象或者数组，当属性深层的值改变时，直接比较会得出两者相同的结果。第一种解决方式是当我们知道具体改变的是哪个参数，直接比较相应的参数即可。

优化方式：首先我们可以将复杂数据结构所关联的视图单独拆解出来，使其不会影响到其他的元素渲染

更完美的解决方案是使用immutable-js库，通过数据的不可突变型来简化判断。

3.React技术原理，虚拟DOM

答：一个不完整的MVC框架，最多可以认为是MVC中的V。通过虚拟DOM映射真实DOM,当数据变化时，对虚拟DOM进行diff比较，只修改需要修改的真实DOM。React基于节点不会跨层次移动的假设使原来为O(n3)的时间复杂度降到O(n)。

4.ajax请求放在React的哪个生命周期，为什么

答：组价挂载时会依次经历下面几个生命周期

• constructor()
• componentWillMount()
• render()
• componentDidMount()

react16以后，React采用了Fiber的架构，Fiber启用了async render，componentWillMount 可能会被执行多次。

另一种说法是服务端渲染 componentWillMount 会被执行两次，一次在服务端，一次在客户端。

5.React16中废弃的API及新的特性

答：用 getDerivedStateFromProps来替代 componentWillReceiveProps ，当父组件引发当前组件渲染过程时触发。

新增了getSnapshotBeforeUpdate，该函数在render之后执行，此时DOM元素还未被更新，可以获取DOM的信息，计算得到一个 snapshot,这个snapshot会作为componentDidUpdate的第三个参数传入。

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('#enter getSnapshotBeforeUpdate');
    return 'foo';
}

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

其他改变：

> React16采用了Fiber的内部架构，将大量的计算任务分片，异步化

> ReactDOM.createPortal，可以将组件渲染在任何地方

> render方法可以返回数组，需要使用key，还支持返回一个字符串

> componentDidCatch

> 减小了30%的体积

6.Redux相关知识

7.不可突变性

答：immutable 不可突变型，可以给React带来数十倍的性能提升。

Immutable Data一旦创建，就不能再被更改。

Immutable 实现的原理是 Persistent Data Structure（持久化数据结构），也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变。同时为了避免 deepCopy 把所有节点都复制一遍带来的性能损耗，Immutable 使用了 Structural Sharing（结构共享），即如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。

8.SPA单页应用性能优化

答：服务端渲染

分块懒加载

SSR组件级缓存

减少首页数据

合并JS文件

避免使用大型类库

tree-shaking打包减少无用代码

图片优化策略

gzip压缩

图片懒加载

9.React Router有哪两种模式，以及不同点

答：hashHistory和browserHistory，后者地址栏更加美观，但需要服务端配合，将前端的请求地址指向一个固定的页面。

10.Vue里面的生命周期函数为什么不能使用箭头函数

答：会找不到vue的实例对象，this会指向undefined。

11.Mixin 的相关概念及作用

答：混合，复用。

12.Vue 动态组件

答：component标签。

13.小程序加载慢的处理方式

答：

启动加载优化：

控制包的大小，压缩代码，清理无用的代码和资源文件，减少资源中的图片，采用网络中下载

采用分包加载机制，将用户访问率高的页面放在主包里，将访问率低的页面放在子包里，按需加载

采用分包预加载技术，在用户点击子页面前，就下载子包

独立分包技术

首屏加载，在onLoad就请求数据，不要等页面ready

用storage API对变动低的数据进行缓存

loading或骨架屏

渲染优化：

避免不当的setData：不要频繁调用，多次合并成一个，减少数据量

与界面渲染无关的数据不要放在data里，可以放在page对象下的其他字段中

setState局部刷新

不要在后台页面进行setData，因为多个webview会共享一个JS运行环境

使用自定义组件

总结：

小程序启动加载性能

• 控制代码包的大小
• 分包加载
• 首屏体验（预请求，利用缓存，避免白屏，及时反馈）

小程序渲染性能

• 避免不当的使用setData
• 合理利用事件通信
• 避免不当的使用onPageScroll
• 优化视图节点
• 使用自定义组件

14.输入URL打开网页的过程

答：查询DNS 内存，本地文件，通过UDP去请求DNS服务器。

获得IP，进行三次握手。

15.DNS查询用的是什么方式

答：DNS是应用层协议，使用UDP数据包。

16.三次握手的知识，发生在网络的哪一层，http呢

答：三次握手发生在传输层，http发生在应用层。

17.内联以及外部 css js 在dom 渲染的时候会阻塞吗，如何不阻塞

答： 无论是外链CSS还是内联CSS都会阻塞DOM渲染（Rendering），然而DOM解析（Parsing）会正常进行。

不论是内联还是外链JavaScript都会阻塞后续DOM解析（Parsing），DOMContentLoaded 事件会被延迟，

后续的 DOM 渲染（Rendering）也会被阻塞。

如何不阻塞：CSS可以使用媒体查询减少不必要的阻塞，JS将代码放到最后，或者使用async方式加载外部代码。

18.Commonjs AMD CMD 的不同

答：nodejs是使用commonjs的，使用同步的方式加载模块。有四个重要的环境变量为模块化提供支持：module, exports, require, global。

AMD 采用异步的方式加载模块，依赖模块的语句放在回调函数中，推崇依赖前置，提前执行。

CMD和AMD类似，但是推崇依赖就近，延迟执行，什么时候需要用到的时候就require进来。

19.websocke和http的联系和不同

答：相同点是两者都是基于TCP，都是应用层协议。

不同点是websocket是双向的，而http是单向的。

WebSocket是需要浏览器和服务器握手进行建立连接的。而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接。

WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的。

websocket建立连接过程：

> 首先，客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等。

> 然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据。

> 最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信。

[LiuL0703]

setState的同步或者异步还是需要看情况的，并不是所有情况下都是异步的，比如在原生事件或者setTimeout中他就是同步的

[louzhedong]

setState的同步或者异步还是需要看情况的，并不是所有情况下都是异步的，比如在原生事件或者setTimeout中他就是同步的

受教了，看了官网确实是这样的

[shuai4983958]

既可能是同步的，也可能是异步的。 准确地说，在React内部机制能检测到的地方， setState就是异步的；在React检测不到的地方，例如setInterval,setTimeout里，setState就是同步更新的。