一张图解释React为什么能成为前端新贵

前后端逐渐完全分离的大趋势下，原来的轻前端重后端过度到了现在的重前端开发。

见证了许多前端框架轮回，从最早的property.js，到jquery，从ExtJs到EasyUI，再到jqueryUI的我，不得不放下陈旧的框架，从0开始并沉淀两年的时间学习React到，开始分析为什么从Facebook开源出来的React为什么能站在当前的风口浪尖上。

很多人都会抱怨React学习成本这么高，语法复杂且冗余，比起原来的jquery来一行代码现在要写5行以上React代码。它好在哪里？

客观的说jqery的选择器非常强大且性能高效。操作DOM元素易如反掌。信手拈来。而React则要通过原生冗余的js调用document.getElemenyById()，来获取元素，之后通过调用setState()设置新的值通知消息事件触发render()方法将整个页面做重新渲染。比起jquery的$('id').val(newValue)一行代码绕了好大一个圈。

但是

一张图来解释React同Jqery的比较:

如果我们操作一个dom元素来修改它的属性或者值使用jqery会很舒服，但如果一个页面的元素越来越多，且互相交互依赖，这样就会让整个js代码越来越凌乱。代码复杂度就会成指数级上升。而React代码量虽然也会增多，但复杂度趋势会趋于平缓。如果是在大型系统跨页面之间通信那么jqeury就望尘莫及了。

React借鉴了后端的MVC分层思想，将前端按职责功能进行了划分。每个模块各司其职，条理清晰。然后所有交互都沿着一条总线进行循环。