这篇文章主要是对知乎上关于react的讨论，做一些整理。观点都来自于网络上他人的说法。希望通过这些观点，可以形成自己的关于react的理解。
一个用来构建用户界面的 javascript 库
react是起源于facebook内部的项目，当时fb的前端团队对当时市面上所有的javascript mvc框架都不满意，决定自己写一套，用来架设Instagram。做出来之后，发现这套东西很好，于是在2013年5月开源了。
react产生过程
- 在写前端应用时，手动管理 DOM 和控件状态是没有规范化的操作，繁琐又容易出错。在大规模应用的情境下维护起来太困难。
- 既然在DOM手动管理太繁琐，那就在每次状态有更新的情况下重新渲染整个UI好了，这样可以省去一次次手动改变DOM的操作，也可以避免把组件状态存储在DOM当中的情况。
- 每次都重新渲染整个UI在很多时候会效率低下，所以就加上一个Virtual DOM来做different，把手动管理DOM的步骤隔离开来，把所有基本组件都变成JavaScript object。
- 既然在把所有的 HTML 组件都抽象化成js object了，也就不需要HTML为基础的模版了，应该直接写组件。Facebook在PHP已经使用XHP很久了，把那套方法搬到JavaScript上就成了JSX。
- UI的状态和获取的数据需要分开处理，使用state和props的概念来区分它们。
react的思想独特，性能出众，代码逻辑简单。
react的官方说明的理解
1.JUST THE UI. react可以认为只是一个模板引擎，使用在任何mv*(mvc,mvp,mvvvm等)的框架中做view层，使用react的组件化思想。
2.VIRTUAL DOM. 这是由react提出的概念，虚拟 DOM 会使得应用只关心数据和组件的执行结果，中间产生的DOM操作不需要应用干预。现在的很多前端框架都有开始使用虚拟DOM这个概念，可以提高js渲染的速度。
3.DATA FLOW. 单向数据流，只需要关心从数据怎么得出界面就行。由数据驱动页面的方式，可以轻松让用户界面和数据保持一致。当底层的数据变了，React 会自动处理所有用户界面的更新。可以让UI组件状态的维护管理更加清晰。
理解虚拟DOM：
虚拟 DOM 是在 DOM 的基础上建立了一个抽象层，我们对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM，最后再批量同步到 DOM 中。
React 会在内存中维护一个虚拟 DOM 树，当我们对这个树进行读或写的时候，实际上是对虚拟 DOM 进行的。当数据变化时，然后 React 会自动更新虚拟 DOM，然后拿新的虚拟 DOM 和旧的虚拟 DOM 进行对比，找到有变更的部分，得出一个Patch，然后将这个 Patch 放到一个队列里，最终批量更新这些 Patch 到 DOM 中。
这样的机制可以保证即便是根节点数据的变化，最终表现在 DOM 上的修改也只是受这个数据影响的部分，可以保证非常高效的渲染。
理解单向数据流：
在jquery时代，我们都是基于事件驱动，对于简单的交互需求而言，这确实足够了，而且开发起来非常迅速。但业务一旦复杂，这种基于事件驱动的东西就会变得很乱，页面需要更新的DOM很多，就容易出错。
单向数据流的概念就出现了。更新 DOM 的数据总是从顶层流下来，用户事件不直接操作 DOM，而是操作顶层数据。这些数据从顶层流下来同时更新了DOM。你的代码就很少会直接处理DOM，而是只处理数据的变更。这样会很大程度上简化代码和逻辑。
举个例子：我点击一个button，然后页面上一个span里数字+1，原有的思考逻辑是“点击发生，然后数据变化，然后UI跟着变化+1”。而现在的思考逻辑是我的数据变化了，那么我的UI会自动更新，那么我只用考虑“点击发生，数据变化”。甚至可以把UI和数据变化分层然后处理。
React解决的前端痛点
在app和H5时代，业务逻辑反而比较简单,复杂的业务逻辑通常也都是交由后端进行处理，前端页面上最难的逻辑是交互，视图嵌套，网络交互，内容更新这块的体验逻辑。
开发前端的思路已不是当年的 Web page，而是 Application。
前端经常要涉及因为状态的改变而进行视图的改变，这时候往往会有复杂的DOM操作。组件化
在Web前端，组件化现在是一个普遍性的需求。
react使用的js为中心，把"HTML"放到js里的组件化思想，是现在前端组件化实践中比较优秀的一个方案。
使用ES6语法写组件，可以开发规范化的自定义ui组件库，也可以使用第三方的组件库(例如antd-design)。
单向数据流
复杂的交互操作时，你需要做的，只是更新你的数据源，React会把你的数据从顶层组件一层一层地传下去，React甚至会帮你优化刷新数据时对DOM节点的复用，所以你也无需关注绘制的效率问题。（FB甚至给了接口让我们能够自己手动优化这些细节，但同时也狂妄地跟我们说大可不必这样。）React把你从复杂的DOM操作中解放出来，让你专注于应用中本身的逻辑。
React可以提升你的开发体验，使用熟悉的js语法，新的JSX语法标签使用方式与HTML标签一样。采用函数式编程的理念，可以让代码更简洁。
Virtual DOM 隔离DOM操作，让渲染后端不局限于浏览器。
React与Angular的对比
Angular是框架，React是类库。ng是一个完整的框架，提供了比 React 多得多的建议和功能，你只需要直接使用就可以了。而要用React，开发者通常还需要借助别的类库来打造一个真正的应用。比如你可能需要react-router库来处理路由、redux或flux管理state、额外的库做测试以及管理依赖等等。
"如果仅从框架这一点来看，选择Angular还是React就像选择直接购买成品电脑还是买零件自己组装一样。"在大小方面，由于ng是一个大而全的框架，自带了更多的功能。而React只加载你需要的部件，react要比ng小得多。很多应用其实用不到这种大型框架提供的所有功能。在这个越来越拥抱微服务、微应用、单一职责模块（single-responsibility packages）的时代，React 通过让你自己挑选必要模块，让你的应用大小真正做到量身定做。
React以JavaScript为中心，把"HTML"放到JS里，JavaScript远比HTML要强大。因此，增强JavaScript让其支持标签要比增强HTML让其支持逻辑要合理得多。无论如何，HTML与JavaScript 都需要某种方式以粘合在一起。
Angular是以HTML而非JavaScrip为中心的，把“JS”放到HTML里。你必须学习学一大堆Angular特有的语法(标签)，即ng框架特有的HTML补丁（shim），比如为HTML加入了循环语义的HTML特性。而React只需要你懂JS。
网友评论