React解决了前端开发中的哪些痛点？
下面我分一下逻辑来详述一下我对这个问题的见解。
1. 前端开发中会有哪些问题需要考虑
2. 目前解决这些问题的技术方案
3. React 技术栈对上述问题的解决
一、前端开发中会有哪些问题需要考虑
讨论这个问题我觉得应该回到问题的本质 -【前端开发会考虑些什么问题】，这些问题即是前端开发过程中的痛点也是难点，了解了这些问题才能知道为什么会有 React 出现，以及 React 如何解决这些问题的。
首先，对于一个前端团队来说，在进行前端技术规划的时候都应该考虑的事情：
组件库、模块化
开发效率
运行效率
可维护性
体验优化
组件库、模块化
首先是组件库，任何一个前端业务团队都会做的事情就是沉淀组件，公共基础组件，业务组件，函数工具库，这对于业界的前端来说是共识。 组件库也就是轮子库，是提高团队开发效率的最好方式，同时也是团队的基础沉淀（拿 KPI 的绝佳帮手）
然后是模块化，在几年前，经常会看到一个 js 几千行的情况，但是基于可维护性和重用性的考虑，会把js 拆分成模块，模块化的需求已经很普遍，出现了很多如 `AMD` `CMD` `CommonJs` `UMD` 这些规范，以及 `require.js` `seaJs` `Browserify` `webpack` 这些工具和库来解决这些问题。
开发效率
开发效率是前端团队对业务响应速度的反馈，如果一个业务交给前端团队过后几个月都没有结果那必然会引起上下游的不满， 不管技术做的多棒，选什么框架，最终的目的都是完成业务。 那哪些因素会影响开发效率呢？
1. 业务代码架构设计
2. 可重用模块和组件
第一点是业务代码的架构设计，好的设计能够极大的减少代码量和出 bug 的可能。 第二是拥有大量可重用的模块和组件，能够快速的实现交互
运行效率
运行效率是用户体验的关键，对于对效率要求极高的业务场景来说，这可能是选择框架的第一标准
可维护性
前端开发中大多数在做的事情是：
1. 新业务加功能
2. 改版
3. 解决 bug
特别是在大公司的前端更是体会深刻，可能重来没有做过新业务，都是在维护旧的代码，填坑加埋坑。 如果业务代码设计差，可阅读性差，很难定位 bug。 特别是千奇百怪的 MVC 设计，大控制器，复杂的 Model ，想要定位出哪里出了问题真是一件 eggache 的事情。
体验优化
体验已经成了现代化前端开发的必谈之物，所以出现了当页面应用(SPA)，Instant Loading，Application Shell]，Progress webapp 这些名词。
二、目前解决这些问题的技术方案
组件化：webComponent、polymer、x-tag、react、jQuery-plugin、angular-directive
模块化：webpack、browserify、require.js、sea.js
开发效率：MVC(Backbone) < Flux(React) < MVVM(Angular.js、vue、ember.js)
运行效率：Backbone、React
可维护性：Flux、Redux
现代化的一些框架几乎都包含组件化的考虑，不过在其他方面各有其优势，关键点是在开发效率和运行效率之间的平衡
三、React 技术栈对上述问题的解决
注意我这里提的是 React 技术栈，并非题主说的 React，个人认为在描述 React 的时候应该是在讲 React 生态体系，那对于上面说的难点痛点在 React 中一一对应的解决方案。
组件化：React 天生组件化，这是 React 的核心，除了能够在团队内部积累业务组件以外，也能找到众多开源组件的实现
模块化：基于 webpack 可以使用 Es6 或 CommonJs 的写法实现模块化代码
开发效率：React 的代码基本就是组件的组合，分而治之的方式让代码的可阅读性很高，容易理解。 而且相比于 MVC 几乎是去除了 Controller 的角色，只用关心一个 render 函数，不用关系视图局部的修改。
运行效率：React 实现了 Virtual DOM ，相比于 MVVM 框架具有更优的效率
可维护性：React 基于 flux 或 redux 的架构设计，确定性的 store 很容易定位问题，无论是新增业务代码还是查找业务 bug 都不再是难题
体验：基于 React 可以很容易的实现 SPA （React-router）
题外话：大多数人说 React 技术栈的学习成本太高，其实我想说的是真没有那么难。。。。真的，如果要学 React 但又苦于没有系统的学习资源，那我就打个小广告，最近在维护 LeanReact - 知乎专栏 ，会系统的讲解 React 生态的知识，有兴趣的朋友可以关注
版权说明：Copyright © 广州京杭网络科技有限公司 2005-2025 版权所有 粤ICP备16019765号
广州京杭网络科技有限公司 版权所有
免费热线：400-683-0016
扫二维码关注公众号
当前位置：