Reactjs快速上手

摘要：当或的值发生变化时触发，并通过返回值确定是否触发更新事件但初始化组件时不会触发。该方式仅在未使用的时候适用。

React是由fackbook开放的一个构建用户接口的javascript类库,其主要目的是为了开发随时间数据不断变化的大型应用程序,许多开发者将React视作为MVC模式中的V.2011年React开始被fackbook工程师着手开发,并作为内部使用,2013年正式开源,学习react需要掌握一定的JavaScript基础。

交互式开发 ：当有数据发生变化时，界面会发生相应的变化.

组件为开发单元：React是由组件作为开发单元的,一个组件可以包含一个或多个其他组件.

可以在多个平台中使用: React除了可以在webapp中使用,还可以借助React Native将其应用到IOS和Android应用程序.

开发React程序需要引入必要的文件,下面是一个React程序的基本构架:

</>复制代码 
    
    
    
    
    

这里我们引入了三个文件,这几个文件我都是通过bower进行安装的,首先是react.js,这个主要包含了React的相关方法的定义.react-dom.js是将我们定义的组件插入到html文档中.browser.min.js这个文件的作用是将具有JSX语法的代码转换为JavaScript代码,假如我们使用的是JavaScript编写代码则这个文件可以不引用.当然你可以先使用JSX编写，然后通过react-tools进行离线转换.

这里先给大家列出一个小的例子,让大家先尝尝鲜.

</>复制代码 
    
    
    
    
    
    
    

这是一个简单的搜索功能的实现,以上代码可以直接放在html文件中运行.这里我们一共定义了三个组件,分别是SearchInput List SearchBox,这里有一点需要提示大家:组件名的首字母必须大写.SearchInput和 List作为SearchBox的子组件,我们创建组件是使用的React.createClass方法,并通过ReactDOM.render将组件添加到html文档中.

这里面还有两个比较特殊的值this.props和this.state.这两个的区别在于this.props在载入后不会发生改变,而this.state可以通过被设置从而导致相应的变化.

React API定义了两个对象React和ReactDOM.

React.Component是在ES6语法下定义组件使用到的，如下:

</>复制代码 
class HelloMessage extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}

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");  // true

displayName:当开发调试时在控制台中使用到的组件名.

componentWillMount:组件将要被加载时触发此方法

componentDidMount:组件加载成功后触发此方法

componentWillReceiveProps:当this.props值发生变化时触发此方法,但初始化组件时不会触发。

shouldComponentUpdate：当this.props或this.state的值发生变化时触发，并通过返回值确定是否触发更新事件.但初始化组件时不会触发。

componentWillUpdate：组件即将更新时触发此方法.

componentDidUpdate：组件即将更新完成后触发此方法.

componentWillUnmount：组件即将被卸载时触发此方法.

创建一个新的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元素,同时合并其props和子元素.

</>复制代码 
React.cloneElement(ReactClass Type,[props],[childrens...]);

返回一个生成指定类型 ReactElements 的函数

判断一个对象是否为有效的React元素.

</>复制代码 
var ele = React.createElement("div");
React.isValidElement(ele);  // ture

React.DOM 运用 React.createElement 为 DOM 组件提供了方便的包装。该方式仅在未使用 JSX 的时候适用。例如，React.DOM.div(null, "Hello World!")，这里封装了一个div DOM组件。

此对象是为组件的this.props的验证做准备的.

</>复制代码 
React.createClass({
    propTypes:{
        name:React.PropTypes.string,
        age:React.PropTypes.number
    }
    ...
});

这里是期望this.props.name的值类型为String,this.props.age的值类型为Number.

此对象可对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.render是将定义的组件渲染到DOM元素中.

</>复制代码 
ReactDOM.render(,document.getElementById("container"));

ReactDOM.unmountComponentAtNode是将已经渲染的React组件从DOM元素中移除.

</>复制代码 
ReactDOM.unmountComponentAtNode(document.geElementById("container"));

当组件加载成功返回渲染的DOM元素.

</>复制代码 
DOMElement findDOMNode(ReactComponent component)