react开发一款框架-cst.pptx

react;

React是Facebook开发的一款JS框架;

传统页面从服务器获取数据，显示到浏览器上，用户输入数据传入服务器的时候，随着数据量的增大，越来越难以维护。

Facebook认为MVC无法满足他们的扩展需求，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解。认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试。

;

MVC

;Model（模型）:

是应用程序中用于处理应用程序数据逻辑的部分。

通常模型对象负责在数据库中存取数据。

View（视图）:

是应用程序中处理数据显示的部分。

通常视图是依据模型数据创建的。

Controller（控制器）:

是应用程序中处理用户交互的部分。

通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。;React主要原理何特点：

(效率高)

传统web页面操作DOM一般是直接操作，但是代价很大，涉及重绘重排非常耗性能，而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接操作DOM。就是Virtualdom,一个轻量级虚拟的dom，又由于diff算法，更新virtualdom时不保证马上影响真实dom，react会等到事件循环结束，然后利用diff算法，通过当前新的dom表述与之前做比较，计算出最小的步骤更新真实的dom。

(天生组件化)

Components组件：

在dom树上的节点被成为元素，在这里不同称为virtualdom，整体称为component，众多的virtualdom的节点就是一个完整的抽象的组件。

;(清晰)

单项数据流:

从父节点传递到子节点，因为组件是简单而且易于把握的，他们只需从父节点获取props渲染即可。

State和Render:

state属性包含定义组件所需要的一些数据，当数据发生变化时，将会调用Render重现渲染，

React把组件看成是一个状态机（StateMachines）。通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。;应用场景：

复杂场景下的高性能

重??组件库，组件组合（ant.design-支付宝组件库）

懒人必备;来写好配合值文件我们走一个

npminstallbabel-loaderbabel-corebabel-preset-es2015

babel-preset-reactreactreact-dom

test:/\.js$/,

loader:babel,

exclude:/node_modules/,

query:{

presets:[react,es2015]

};创建第一个组件

自定义组件的首字母必须大写

VarApp=React.createClass({

render:function(){

returndivZeroToOne{this.props.name}/div;

}

});

style:{{width:‘100px’}}必须在这里填写样式

render:返回值直接决定,最后App（组件）在root里显示的结构

ReactDom.render(

Appname=‘cst’/,

document.getLElementById(‘root’)

);

这里的div其实时VirtualDom并不是真实的dom元素;Jsx：divhello{this.props.name}/div

语法糖：计算机语言中添加的语法，对语言的功能没影响，方便使用，增强可读性。

React官方推荐使用jsx当然你想直接使用js代码，也是可以得只是使用jsx，组件得结构，和组件之间得关系看上去更清晰，使用页更方便

Jsx最后会被解析成js才能被执行，放在react里我们看一下

;组件生命周期:

Mounting(组件生成时触发)

getDefaultProps:

getInitialState:

componentWillMount:

render:

componentDidMount:

Updateing(组件更新时触发，state真实变化时影响dom结构才会，真正的改变dom结构，state，props变化都会触发组件更新)

componentWillReceiv