产品人眼里理解的大前端(1)

我的学习方法论——有效的学习必须要经历从输入——输出的闭环。由于个人工作性质和兴趣,每天沟通更多的还是前端开发,这里结合自己的学习与经验讲讲作为产品用大白话来讲讲对前端技术的理解,如有不对欢迎指正,请轻喷。

React


先看看来自百度百科解释:
React是用于构建用户界面JavaScript库, [2] 起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

在了解react之前,我们需要理解DOM:众所周知,我们所看到的网页HTML是由很多标签组成,标签都是嵌套的,一层套一层,每一层可以同时存在很多标签,就像电脑文件夹里的路径一样,D盘里可以创文件夹,文件夹里还可以套子文件夹,子文件夹里又可以创建文件夹,从外向里循序渐进,而这种结构主要便于解析和查询,浏览器在解析HTML文档时,会将每个标签抽象成代码里的对象,按照这种层次分明的结构组织,就是DOM。

以上我们知道了,web世界里的DOM树是浏览器用来描述HTML页面的一种结构,基本前端开发都在围绕它在做文章,但是DOM树太庞大,频繁的操作会带来性能变差的问题。

举个例子,开发电商网站,我们搜索一个关键词,页面可以显示一堆商品,这个是可以用HTML+JS快速实现1,但是如果我们加上了筛选价格、排序品牌等功能,JS可以对数据进行排序,但排序之后需要操作大量的DOM用户才能看到结果的变化,但是这样的页面里,DOM的节点可能有上千个,容易带来UI组件性能变差、编码复杂程度提高的问题,react提供了一种解决思路。

react是facebook推出的一个前端框架,准确来说,他就是一个前端的UI组件库。

React的特点与优势1—组件系统

虽然实际上,HTML标准已经有很多可以直接拿来用的UI组件了,比如常见的<p>标签是用来排版文字的,<from>标签用来处理表单,但是这些UI组件可能对开发们来说称不上有多好用,

好用的UI组件,能够让开发的代码写的非常顺手,而React就用到了一个叫JSX的语法,是JS和XML结合的一种格式,也是一种JS语法扩展。

render(){

return<p>this is react</p>

}

JSX能够允许在一段JS代码里,直接嵌入HTML代码,创建虚拟DOM。当然,直接这样写,浏览器无法识别,它只能识别单独的HTML5和JS代码,需要工具将JSX语法转换成JS才可以实现。

它的特点在于编译为JS代码后进行了优化,结构清晰、代码模块化,为什么会这样写,主要还是体现了一种组件化的思想。

可以把一个UI界面封装起来,做成一个组件,然后其他开发可以复用。

而react最核心的思想就是能将页面任何元素和区域都能看做成一个component,即组件;

加上react社区氛围也非常好,无数开发者都在打造新的、更好用的组件,而直接复用组件能够少写很多代码,方便又好用。

React的特点与优势2—虚拟DOM

除了UI组件好用,性能也是非常重要的,上面已经提过频繁操作DOM树是导致web耗时卡顿的主要原因之一,下面说是React的优化思路。

React自带了一个虚拟的DOM树:无论要刷新文字还是插广告,都可以操作这颗DOM树,它有一个效率很高的diff算法,每当数据变化时,React都会重构整个DOM树,然后将当前DOM树和上一次的DOM树进行比对,得到DOM结构的区别,之后只要将需要变化的部分进行实际浏览器的DOM更新。虽然每一次都要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能极高,而实际DOM操作的只是部分差异,因此能够达到提高性能的目的。

讲完React的理解,下面再讲讲react的衍生品——React Native

React native


产品们可能经常会遇到这样的问题,群里用户报了一个前端bug,可能直接影响用户操作,问我们什么时候改进?又或是公司群里老板报了个一个问题,要求我们立刻改。这个时候去问前端开发,一般得到的答复就是:等下个版本吧。

那有没有一种技术是可以像web一样可随时发布版本?

RN就是这样技术,专治急性子的产品经理。

它的优势在哪里?

1、动态更新:

也就是ivan一直反复提到的,APP可以做到像网页一样,开发速度快,实时更新,随时上线(其实RN热更新很早之前我们就有了,但是之前由于用的是国外的地址,所以更新一直不稳定,加上答赚更新牵动模块较多,现在换成了国内的地址后,还一直没有大规模测试用过)。

2、江湖统一

除此之外,它还是Facebook推出的一个用JavaScript语言就能同时编写IOS、安卓及后台的技术,用Facebook的话来说就是“learn once write anywhere”,即学习成本只有一次,却完成了所有开发角色的统一,这意味着:

传统互联网公司开发web和APP需要招一个web前端开发(俗称写网站的)、安卓和IOS开发(移动终端开发人员)、后台开发(提供APP数据与维护服务器稳定性);而不同的开发角色需要学习的技术也不同,比如前段开发需要精通web三剑客,安卓开发需要用Java编写,IOS开发用Objective-C语言,后台开发有的公司用PHP、有的用Java和C++;

而用RN以后创业也只需要一名程序员了,只要用这个一门技术就能同时编写安卓APP和IOS APP,一套代码双端复用,对于开发来说,没有前端、终端、IOS和安卓区分,所关注的是一整套应用程序;对于创业公司而言,代码复用成为主旋律,实现需求的成本降低,人力释放及开发效率将得到最大幅度的整合与提升。

虽然这几年RN挺火热,但是在咱们在开发的过程中还是会发现一些缺点,比如RN在动画和性能方面还是略逊色原生(不够顺滑);APP的包比较大;项目做大了,复杂的功能应用还是需要原生开发支持;

毕竟每种语言都有不同的使用场景,有的语言效率更高,有的语言语法更简洁,有的语言专为后台而生,自古以来【】和【广】就是很难并存的,RN混合原生开发也是APP开发后期的发展趋势了。

总的拉说,RN对IOS和安卓的支持都在日趋完善,RN的社区也非常的活跃,相信未来的RN一定可以大放光芒。

考虑阅读体验与时间问题,篇幅没有太长,下次再讲讲自己理解的RN应用和适合的业务。

博客

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容