React简述
React是由fackbook开放的一个构建用户接口的javascript类库,其主要目的是为了开发随时间数据不断变化的大型应用程序,许多开发者将React视作为MVC模式中的V.2011年React开始被fackbook工程师着手开发,并作为内部使用,2013年正式开源,学习react需要掌握一定的JavaScript基础。
React的优势
交互式开发：当有数据发生变化时，界面会发生相应的变化.组件为开发单元：React是由组件作为开发单元的,一个组件可以包含一个或多个其他组件.可以在多个平台中使用: React除了可以在webapp中使用,还可以借助React Native将其应用到IOS和Android应用程序.
开发前的准备
开发React程序需要引入必要的文件,下面是一个React程序的基本构架:
React
这里我们引入了三个文件,这几个文件我都是通过bower进行安装的,首先是react.js,这个主要包含了React的相关方法的定义.react-dom.js是将我们定义的组件插入到html文档中.browser.min.js这个文件的作用是将具有JSX语法的代码转换为JavaScript代码,假如我们使用的是JavaScript编写代码则这个文件可以不引用.当然你可以先使用JSX编写，然后通过react-tools进行离线转换.
一个小Demo
这里先给大家列出一个小的例子,让大家先尝尝鲜.
Search Demo
这是一个简单的搜索功能的实现,以上代码可以直接放在html文件中运行.这里我们一共定义了三个组件,分别是SearchInput List SearchBox,这里有一点需要提示大家:组件名的首字母必须大写.SearchInput和 List作为SearchBox的子组件,我们创建组件是使用的React.createClass方法,并通过ReactDOM.render将组件添加到html文档中.
这里面还有两个比较特殊的值this.props和this.state.这两个的区别在于this.props在载入后不会发生改变,而this.state可以通过被设置从而导致相应的变化.
React API
React API定义了两个对象React和ReactDOM.
React对象
React.Component
React.Component是在ES6语法下定义组件使用到的，如下:
class HelloMessage extends React.Component {
render() {
return Hello {this.props.name};
}
}React.createClass
React.createClass方法也是用于定义一个组件,其参数为一个对象，这个对象必须包含render方法,render方法返回一个元素,例如div.这个元素下可以包含任意个html标签或者React组件.
var Component = React.createClass({
render:function(){
return (
Hello World!!!
);
}
);传入这个方法的对象中可以自定义属性,当然还有一些具有特殊意义的属性,具体如下:
render：返回需要展示的组件元素getInitialState：返回值作为this.state的初始值.getDefaultProps：返回值作为this.props的值,其优先级低于直接通过调用该组件时设置的值.propTypes:对this.props中的值做数据类型验证，一般作为开发调试使用,具体的类型请点击查看mixins:传入此属性的值为一个对象，这个对象中的属性或方法将会被扩展到此组件中,它存在的意义是为了复用.statics:传入此属性的值为一个对象，这个对象中的属性或方法将会被扩展到此组件类中
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});
MyComponent.customMethod('bar'); // truedisplayName:当开发调试时在控制台中使用到的组件名.componentWillMount:组件将要被加载时触发此方法componentDidMount:组件加载成功后触发此方法componentWillReceiveProps:当this.props值发生变化时触发此方法,但初始化组件时不会触发。shouldComponentUpdate：当this.props或this.state的值发生变化时触发，并通过返回值确定是否触发更新事件.但初始化组件时不会触发。componentWillUpdate：组件即将更新时触发此方法.componentDidUpdate：组件即将更新完成后触发此方法.componentWillUnmount：组件即将被卸载时触发此方法.
React.createElement
创建一个新的React元素
React.createElement(string/ReactClass Type,[props],[childrens...]);第一个参数是创建的元素,可以是html标签,也可以是自定义的React组件;第二参数是一个对象,其作为this.props的初始值;第三个及后面的参数为此元素的子元素.
ReactDOM.render(
React.createElement("div", null,
React.createElement(SearchInput, {setName: this.setName}),
React.createElement(List, {filterWord: this.state.filterWord, lists: this.props.lists})
),doucment.getElementById('container'));
React.cloneElement
复制一个React元素,同时合并其props和子元素.
React.cloneElement(ReactClass Type,[props],[childrens...]);React.createFactory
返回一个生成指定类型 ReactElements 的函数
React.isValidElement
判断一个对象是否为有效的React元素.
var ele = React.createElement('div');
React.isValidElement(ele); // tureReact.DOM
React.DOM 运用 React.createElement 为 DOM 组件提供了方便的包装。该方式仅在未使用 JSX 的时候适用。例如，React.DOM.div(null, 'Hello World!')，这里封装了一个div DOM组件。
React.PropTypes
此对象是为组件的this.props的验证做准备的.
React.createClass({
propTypes:{
name:React.PropTypes.string,
age:React.PropTypes.number
}
...
});这里是期望this.props.name的值类型为String,this.props.age的值类型为Number.
React.Children
此对象可对this.props.children进行数据处理.
React.Children.map(object children, function fn [, object thisArg])
React.Children.forEach(object children, function fn [, object thisArg])
React.Children.count(object children)
React.Children.only(object children)
React.Children.toArray(object children)ReactDOM对象
ReactDOM.render
ReactDOM.render是将定义的组件渲染到DOM元素中.
ReactDOM.render(ReactDOM.unmountComponentAtNode
ReactDOM.unmountComponentAtNode是将已经渲染的React组件从DOM元素中移除.
ReactDOM.unmountComponentAtNode(document.geElementById('container'));ReactDOM.findDOMNode·
当组件加载成功返回渲染的DOM元素.
DOMElement findDOMNode(ReactComponent component)