react思想

  • 2017-09-15
  • 0
  • 0

一个用来构建用户界面的 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。

作者:可乐爱上咖啡
链接:http://www.jianshu.com/p/5e86a793fb3d
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

评论

还没有任何评论,你来说两句吧