react是什么?

react是facebook开发的一款js库,那么facebook创建react的初衷是为了解决什么问题呢?

facebook认为MVC无法满足他们的扩展需求?

由于他们巨大的代码库和庞大的组织,使得MVC很快变得非常复杂,每当需要添加一一项新的功能或特性时,系统的复杂度就成级数增长,致使代码变得脆弱和不可预测,结果导致他们的MVC正在土崩瓦解。

认为MVC不适合大规模应用?

当系统中有很多的模型和视图时,其复杂的程度就会迅速扩大,非常难以理解和调试,特别是模型和视图间可能存在的双向数据流动。

如何解决?

需要“以某种方式组织代码,使其更加可预测”,这通过他们facebook提出的flux和react已经完成。

  flux是一个系统架构,用于推进应用中的数据单项流动。react是一个javascript框架,用于构建“可预期的”和“声明式的”web用户界面,它已经使facebook更快的开发web应用。

react用于构建那些随时间改变的大型应用,做这些,react有两个主要的特点?

1.简单

  简单的表达任意“时间点”你的应用应该是什么样子的,react将会自动的管理ui界面更新当数据发生变化的时候。

2.声明式

  在数据发生变化的时候,react从概念上讲与点击了f5一样,实际上他仅仅是更新了变化的一部分而已。

另外,why did we build react?

3.①react不是一个MVC框架

react不使用模板

  响应式更新非常简单

  HTMl5仅仅是个开始

*react主要的原理?

virtual DOM 虚拟DOM

传统的web应用,操作Dom一般是直接更新操作的,但是我们知道DOM更新是比较昂贵的。react为减少对Dom的操作,提供了一种不同的而又强大的方式来更新DOM操作。就是virtual DOM,一个轻量级的虚拟的DOM,就是react抽象出来的一个对象,描述dom应该是什么样子的,应该是什么样子的,应该如何呈现。通过这个virtual Dom去更新真实的DOM,由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的virtual DOM操作就能更快?

因为react有个diff算法,更新virtual DOM并不保证马上影响真实的Dom,react会等到事件循环结束,然后利用这个diff算法,通过当前的dom表述与之前的作比较,计算出最小的步骤更新真是的Dom.

Components 组件

在DOM树上的节点被称为元素,在这里则不同,Virtual DOM上成为commponnent。

Virtual Dom的节点就是一个完整的抽象组件,它是由components的存在让计算DOM diff更高效。

state和render

State 和 Render
React是如何呈现真实的DOM,如何渲染组件,什么时候渲染,怎么同步更新的,这就需要简单了解下State和Render了。state属性包含定义组件所需要的一些数据,当数据发生变化时,将会调用Render重现渲染,这里只能通过提供的setState方法更新数据。

作者:RK_CODER
链接:http://www.jianshu.com/p/ae482813b791
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

时间: 2024-11-05 12:36:54

react是什么?的相关文章

谈谈APP架构选型:React Native还是HBuilder

原文链接 导读:最近公司的一款新产品APP要进行研发,老大的意思想用H5来做混合APP以达到高效敏捷开发的目的.我自然就开始进行各种技术选型的调研,这里重点想说的是我最后挑选出的2款hybrid app开发技术方案:RN(react native),HBuilder.React Native是大名鼎鼎的Facebook的开源技术框架,而HBuilder是国内的H5工具开发公 司DCLOUD的产品.我自己先总结下吧:这两个技术框架在开发效率上基本上可以媲美WEB开发的速度,RN强调的是“Learn

React学习—组件

一.定义 组件就像JavaScript的函数.组件可以接收任意输入(称为"props"), 并返回 React 元素,用以描述屏幕显示内容. 二.组件的分类 1.函数式组件(无状态组件) 它是为了创建纯展示组件,这种组件只负责根据传入的props来展示,不涉及到要state状态的操作.在大部分React代码中,大多数组件被写成无状态的组件,通过简单组合可以构建成其他的组件等:这种通过多个简单然后合并成一个大应用的设计模式被提倡. function Welcome(props) { re

如何写好react组件

react 组件方面: 总结 React 组件的三种写法 及最佳实践 [涨经验] React组件编写思路(一) 使用react-router实现单页面应用时设置页面间过渡的两种方式 [翻译]基于 Create React App路由4.0的异步组件加载(Code Splitting) React进阶--使用高阶组件(Higher-order Components)优化你的代码 Higher-order Components 高阶组件 redux方面: Redux-saga 中文文档 https:

react Native如何实现跨平台

react Native是通过虚拟DOM实现跨平台,运行时 将虚拟DOM转换为相应的web编码.android编号.ios编码进行运行的.   代码实现: 01.html: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <script src="react.js"></script> 

ReactJS React+Redux+Router+antDesign通用高效率开发模板,夜间模式为例

工作比较忙,一直没有时间总结下最近学习的一些东西,为了方便前端开发,我使用React+Redux+Router+antDesign总结了一个通用的模板,这个技术栈在前端开发者中是非常常见的. 总的来说,我这个工程十分便捷,对于初学者来说,可能包含到以下的一些知识点: 一.React-Router的使用 Router是为了方便管理组件的路径,它使用比较简单,一般定义如下就行,需要注意的是,react-router的版本有1.0-3.0,各个版本对应的API大致相似,但也有不同,我使用的是2.X的,

React核心内容归纳总结

状态.属性.组件API.组件的生命周期 当react的状态改变时,自动执行this.render()方法更新组件ES6写React的时候,事件里不会自动绑定this,需要自己绑定,或者直接在constructor里写方法 constructor(props) { super(props); this.state = { liked: false }; this.handleClick = (e) => { this.setState({liked: !this.state.liked}); };

react中createFactory, createClass, createElement分别在什么场景下使用,为什么要这么定义?

作者:元彦链接:https://www.zhihu.com/question/27602269/answer/40168594来源:知乎著作权归作者所有,转载请联系作者获得授权. 三者用途稍有不同,按依赖关系调整下顺序:1. createClass,如其名就是创建React组件对应的类,描述你将要创建组件的各种行为,其中只有当组件被渲染时需要输出的内容的render接口是必须实现的,其他都是可选: var Hello = React.createClass({ render: function(

REACT 学习

1.React/React Native 的ES5 ES6写法对照表 http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 2.

菜鸟窝React Native 视频系列教程

菜鸟窝React Native 视频系列教程 交流QQ群:576089067 Hi,我是RichardCao,现任新美大酒店旅游事业群的Android Developer.15年加入饿了么即时配送BU,后负责蜂鸟众包Android端,期间引入react-native技术,作为国内react-native 与 Android混合开发的早期商业项目,具有一定经验,同时也是react-native开源项目reading(https://github.com/attentiveness/reading)

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来

菜鸟窝React Native 系列教程-1.移动端开发趋势与未来 课程持续更新中..... 我是RichardCao,现任新美大酒店旅游事业群的Android Developer.如果你也有兴趣录制RN视频,请加入下面QQ群找我. 下载地址:https://pan.baidu.com/s/1c1XmE56 密码:shhw 首发地址:菜鸟窝-ReactNative学习板块 交流QQ群:576089067 课程目录:菜鸟窝React Native 系列教程