和面试官聊 React

你了解React吗

了解，React是facebook搞出来的一个轻量级的组件库，用于解决前端视图层的一些问题，就是MVC中V层的问题，它内部的Instagram网站就是用React搭建的。

React解决了什么问题

我觉得解决了三个问题，一个是组件复用问题，一个是性能问题，还有一个，如果也算的话，就是兼容性问题：

1、组件复用问题：在React之前的一些前端框架，比如Anguar，bootstrap等，写出来的组件，都是能够使用在浏览器端，虽然可以在各个web系统中复用，但是没有办法跨平台复用，比如运用在android或IOS的原生应用上。

但是React就可以，我们使用React写出来的组件，结合React-dom可以显示在浏览器上，结合React-native可以显示在android、IOS原生应用上，可以让我们的组件，一次编写，处处运行，帮助我们避免大量的重复劳动。

而且因为React是facebook推出来的，本身它的思想又很先进，所以在前端领域很快就火了起来，有大量的开发来构建整个的环境，那么基于React也是出现了很多比较好用的组件库，比如蚂蚁金服的ant.design以及React-Bootstrap，基于这些组件库，我们在做开发的时候，可以极大的节省我们的开发成本。

2、性能问题：在之前的开发当中，如果页面的某个组件发生了变化

比如我们修改了Jim Green的名字，那我们需要提交修改请求，然后把用户列表信息重新获取一遍，最后把表格从头到尾渲染一遍，我们注意到，整个过程中，Joe Black等用户信息所在的行，其实没有发生过变化，它的重新渲染其实是你没有必要的，而且渲染又是非常耗时的。

React做的一件事情，就是对于每个组件，它在内存里生成一棵虚拟dom树，当组件发生变化的时候，它会生成一颗新的虚拟dom树，然后和老的进行比较，找出有差异的节点，然后只更新发生变化的dom节点，所以更新的成本会比较小，性能也会更好。

3、浏览器兼容问题：React对浏览器的兼容也做了一些工作：

主要是在事件方面，我们知道，各个浏览器的事件处理有可能不一致，比如取消事件冒泡：

 event = event || window.event;
    
//取消事件的默认行为
if (event.preventDefault) { // firefox
    event.preventDefault();
} else { // IE 浏览器
    event.returnValue = false;
}

React使用SyntheticEvent，包装和规范了原生的浏览器事件，这样各个浏览器的事件行为都能够得到统一。

React的协议问题你了解吗

React遵循的协议是“BSD许可证 + 专利开源协议”，这个协议比较奇葩，如果你的产品跟facebook没有竞争关系，你可以自由的使用react，但是如果有竞争关系，你的react的使用许可将会被取消。

这也导致很多的大公司，比如百度、阿里巴巴、google、微软等，禁止公司内部的项目使用React，不过16年阿里巴巴出了一个类似的做三端统一的前端框架，叫Weex，据说还不错，抗住了双十一的压力，还有这个项目已经成功的入住Apache孵化器了，这也表示，在协议方面，是不会有React那种问题的。

了解shouldComponentUpdate吗

React虚拟dom技术要求不断的将dom和虚拟dom进行diff比较，如果dom树比价大，这种比较操作会比较耗时，因此React提供了shouldComponentUpdate这种补丁函数，如果对于一些变化，如果我们不希望某个组件刷新，或者刷新后跟原来其实一样，就可以使用这个函数直接告诉React，省去diff操作，进一步的提高了效率。

React这种虚拟dom机制对于局部数据变动的更新非常有效，而组件整体更新的场景发生的概率又比较小，所以总的来说是非常不错的，像Vue组件更新以前用的是依赖收集的方式，后来发现，好像没有React那么高效，所以在2.1.x版本的时候，也改成了虚拟dom的方式。

你刚刚提到了依赖收集，那什么是依赖收集呢

如上面的这段Vue代码，在模板中我们并没有使用text3这个属性，当我们对text1、text2进行赋值的时候，Vue会刷新模板，但是如果我们对text3进行赋值的时候，就不会刷新，为什么呢？因为使用了依赖收集。

简单来说当Vue渲染模板的时候，会读取text1、text2这两个变量，这个时候就会调用它们的getter函数，然后在getter里面会把text1、text2收集到收集器里，等到对text1、text2赋值的时候，会判断他们是否在收集器里，如果在就会更新模板，否则就不做处理，这个就是所谓的依赖收集。

【未完待续...】