和面试官聊 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渲染模板的时候,会读取text1text2这两个变量,这个时候就会调用它们的getter函数,然后在getter里面会把text1text2收集到收集器里,等到对text1text2赋值的时候,会判断他们是否在收集器里,如果在就会更新模板,否则就不做处理,这个就是所谓的依赖收集。

【未完待续...】

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249