React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式。
React使用JavaScript来构建用户界面,因此可以说是一个用来构建用户界面的JavaScript库。
1、为什么使用 React?
React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。
1)简单:仅仅只要表达出应用程序在任一个时间点应该呈现的样子,当底层的数据变了,React会自动处理所有用户界面的更新。
2)声明式:数据变化后,与点击“刷新”按钮类似,但仅会更新变化的部分。
3)构建可组合的组件:React构建可复用的组件,事实上通过React唯一要做的事情就是构建组件,这得益于其良好的封装性,组件使代码复用、测试和关注分离更加简单。
2、对React认识的误区
1) React不是一个完整的MVC框架,最多是MVC中的V(View),甚至并不非常认可MVC开发模式;
![](/qrcode.jpg)
2) React和Web Component不能相提并论,两者并不是完全的竞争关系,完全可以用React去开发一个真正的Web Component;
3) React不是一个新的模板语言,没有JSX的React也能工作。
3、React的原理
在Web开发中,总需要将变化的数据实时反应到用户界面上,这就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。
React为此引入了虚拟DOM的机制:在浏览器端用JavaScript实现一套DOM API。基于React,所有的DOM操作都通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后将目前的整个DOM树和上次的DOM树进行对比,得到DOM树的区别,仅仅将变化的部分进行浏览器DOM更新。尽管每一次都要重新完整的虚拟DOM树,但因为虚拟DOM是内存数据,性能极高,而对实际DOM操作的仅仅是Diff部分,因此能达到提高性能的目的。此外,React能批处理虚拟DOM的刷新,在一个事件循环内的两次数据变化会被合并,如连续的先将节点内容从x变成y,然后又从y变成x,React会认为UI不发生任何变化。总之,在保证性能的同时,开发者将不再需要关注数据的变化如何更新到实际的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何render的,每做一点界面的更新,都可以认为刷新了整个页面,至于如何进行局部更新以保证性能,则是React框架要完成的事情。
以视频聊天应用为例:当收到一条新消息时,传统的开发过程需要知道是哪条数据,如何将新的DOM结点添加到当前DOM树上;而基于React,永远只需要关心数据整体,两次数据之间的UI如何变化,然后可以完全交给React框架去做,这大大降低了逻辑复杂性和开发难度,产生Bug的概率也更小。
有关虚拟DOM的详细介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/71171567
4、组件化
React以组件的方式去重新思考用户界面的构成,将用户界面上每一个功能相对独立的模块定义成组件,然后将小组件通过组合或嵌套的方式构成大组件,最终完成整体UI的构建。
MVC开发模式的思想:将模型—视图—控制器定义成不同的类,实现表现,数据,控制的分离。
组件化开发模式的思想:用户界面功能模块间的分离,完全是一个新思路,从功能的角度出发,将用户界面分成不同的组件,每个组件都独立封装。
1) 组件的特征:
① 可组合:一个组件可以包含其它组件,也可以嵌套在另一个组件内部。也就是说,一个复杂的UI可以拆分成多个简单的UI组件;
② 可重用:每个组件都是具有独立功能的,可用于多个场景;
③ 可维护:每个小组件仅包含自身的逻辑,更容易被维护。
2) 组件的属性:
① 组件名称首字母必须大写;
② 变量名用{}包裹,不能加双引号;
③ 获取属性的值:this.props.属性名;
④ 为元素添加css的class:className;
⑤ 设置组件的style属性:style={{width: this.state.witdh}}。
3) 组件的状态
React的一大创新,是将组件看成一个状态机。
① 设置一个初始状态:getInitialState(),注意:getInitialState()函数必须有返回值,可以是NULL或一个对象;
② 访问状态属性的值:this.state.属性名;
③ 更新状态,触发重新渲染用户界面:this.setState()。
4) 组件的生命周期
组件的生命周期分成三个状态:
① Mounting:已插入真实DOM
② Updating:正在被重新渲染
③ Unmounting:已移除真实DOM
React 为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,共计五种处理函数:
① componentWillMount()
② componentDidMount()
③ componentWillUpdate(object nextProps, object nextState)
④ componentDidUpdate(object prevProps, object prevState)
⑤ componentWillUnmount()
此外,React 还提供两种特殊状态的处理函数:
① componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
② shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用
有关组件的生命周期的详细介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/71172783
5) 组件的嵌套
React是基于组件化的开发,组件化开发最大的优点是复用。实现复用的方式之一便是组件嵌套。
var MyBox = React.createClass({
render: function() {
return (
<div>
用户名:<Input type="text"></Input><br/>
密码:<Input type="password"></Input>
</div>
);
}
});
var Input = React.createClass({
render: function() {
return (
<input type={this.props.type} />
);
}
});
ReactDOM.render(
<MyBox />,
document.getElementById('content')
);
5、JSX语法
HTML直接写在JavaScript中,不加任何引号,就是JSX的语法,允许HTML与JavaScript的混写。
JSX允许直接在模板插 JavaScript变量。如果该变量是一个数组(直接的JavaScript数组或通过map()、filter()等返回的数组),则会展开数组的所有元素。
1) 直接的JavaScript数组:
var arr = [
<p key="1">Alice</p>,
<p key="2">Bruce</p>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('content')
);
2) 通过map()返回的数组:
var arr = ['Alice','Bruce'];
ReactDOM.render(
<div>
{
arr.map(function(item, index) {
return <p key={index}>{item}</p>
})
}
</div>,
document.getElementById('content')
);
6、显示数据
React让显示数据变得简单,当数据变化时,用户界面会自动同步更新。可以认为React组件就是简单的函数,接受 props 和 state作为参数,然后渲染出HTML。
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<input type="text" placeholder="Please enter your name!" />
{this.props.date.toString()}
</div>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('timeBox')
);
}, 1000);
React在用户界面中只改变了时间,任何在输入框输入的内容一直保留,React已经完成这个功能,不需要额外写任何代码。
限制:React组件只能渲染单个根节点,若想返回多个节点,它们必须被包含在同一个节点里。
注意:React中可以使用jQuery,但render()方法的第二个参数必须使用JavaScript原生的getElementById()方法,不能使用jQuery来获取DOM节点。
---------------------
原文:https://blog.csdn.net/zhouziyu2011/article/details/70664968