和面试官聊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赋值的时候,会判断他们是否在收集器里,如果在就会更新模板,否则就不做处理,这个就是所谓的依赖收集。


作者:人口贩卖专家
链接:https://www.jianshu.com/p/54b790d40113
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

发布时间2018/10/10 20:28:45

访问量34 次

网友评论

发表评论

欢迎评论哦!