最火的前端技术，React
2016年12月16日 点击:
编辑: q61350095
果果喜欢没事儿的时候翻出以前的文章来看看，这不，看着看着就找到一个坑，自己埋的。
有篇文章叫程序员天天说的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技术栈的文章，希望能和大家一起学习交流~
相关文章
- · UWB定位芯片发布，打破国外垄断 2019-03-13
- · 轻松拆焊密脚贴片集成电路 2017-04-13
- · 支付系统设计：绑卡、签约和身份验证 2017-02-06
- · 逻辑板上五大电压 2019-09-30
- · 色环电阻快速识别法！ 2017-04-13
- · 求大师解释一下32768h晶振工作原理 2016-12-28
- · 请大家帮忙思考一个继电器通断的问题 2017-02-18
- · pid参数整定口诀 2017-05-02
- · 有会缠环形变压器的师父进 2016-12-21
- · 什么是PCB半孔板？ 2019-08-16