收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2030|回复: 2

[HTML5] 最火的前端技术,React

[复制链接]
发表于 2016-12-24 13:47:29 | 显示全部楼层 |阅读模式
最火的前端技术,React

果果喜欢没事儿的时候翻出以前的文章来看看,这不,看着看着就找到一个坑,自己埋的。
有篇文章叫程序员天天说的DOM到底是什么,讲的是Web前端世界里大名鼎鼎的DOM树,末尾的时候提到了Facebook的高科技,React。今天是时候来填一填了。
说来也巧,果果有个同事前段时间去面试一哥们儿,问到他对React怎么看。那哥们儿也是牛,一上来就大谈Web前端世界的生态,说很多人为了发明一个框架而去重复造很多轮子,这让他很苦恼。在他看来,黑猫白猫,抓住老鼠就是好猫,不用React,照样在前端世界里自由翱翔。同事听了觉得非常有道理,然后拒绝了他。
道理很简单,一个东西之所以火,很多人追捧,一定是它哪一方面特别牛逼。要么能提高生产效率,一天多码几百行代码。要么写出来的代码特别优雅,让人看了就好像春风吹在脸上一样。你可以表示不屑,但是在深入了解它之前,不要鄙视它。当然也不要随波逐流,今天出来一个新框架,去它官网一看简介,哇塞好牛逼,就它了,然后开始把项目往上迁移。不是这样的,除非你有大把时间,而且隔壁产品经理还不好意思催你做需求。
话说回来,React到底解决了什么痛点呢?我们先说是什么,然后再来看为什么。
React是Facebook推出的一个前端框架,准确的说,它是一个前端的UI组件库。你对html里的Button标签不满意?用React的Button吧,人家封装好了,各种牛逼的功能都有,拿来就可以用哦。为了方便在js里直接写html,React用了一个叫JSX的语法,写出来是这个样子:
render(){
      return <div><p>this is react</p></div>;
}
一个js的函数里面,竟然在直接写html代码,好大的胆子。当然,你直接这么写,浏览器是不认的,你需要写完代码之后用专门的工具把它转换成普通的js和html,幸好这些都可以自动搞定。
世间代码千千万,为什么偏非要这样写呢?其实这里有一种组件化的思想在里面。我们都知道程序员写代码,都喜欢面向对象那一套,能封装的就封装起来。用js来包装html,那html是不是也有了面向对象的能力了呢?
把一个UI界面封装起来,做成一个组件,就可以交给隔壁老王去用。如果他用的爽,他会推荐给对面小李去用,一传十十传百,组件就传播出去了。别人因为直接用了你的组件而少些了很多代码,他们会在github上给你一颗星作为奖励的。
另一方面,前文也说了,React做了一个虚拟DOM,可以很好的解决原生js操作DOM太频繁的问题。
想像一下,你在某宝上搜了一个关键词,然后出来一堆商品。这个可以用原生html+js很快实现。然而,当你把按价格排序、按品牌筛选之类的各种功能加上去之后,你会发现要做的事情还有很多。一般来说,js可以很快的对数据进行排序,但是排序之后要依赖大量的操作DOM,才能让用户看到结果的变化。我们说过,这样的一个页面,DOM节点可能有上千个,性能还有编码复杂度都会遇到挑战。
有了React,它自带了一个虚拟的DOM树。你想刷新某个文字?直接来操作它就行了。你想插入一个广告?直接来操作它就行了。你不要操作DOM树了,来伤害这棵虚拟的DOM树吧,它很厉害的,它有一个牛逼的比对算法,保证你无论怎么摆弄,都能把受影响的范围降到最小。
一句话,代码写的爽,性能还有提升,用过的都说好。这就是React,拥护者无数,目前在前端世界里还看不到有力的竞争者。
----------------------------------
最后再附上几篇React技术栈的文章,希望能和大家一起学习交流~
React Router 使用教程:

1.png
发表于 2017-1-4 17:31:30 | 显示全部楼层
瞬间飘过
回复 支持 反对

使用道具 举报

发表于 2017-1-7 16:13:51 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-21 11:41 , Processed in 0.109098 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表