React入门--------顶层API

React.createClass

参数：config(object)

创建一个ReactClass(组件类)，参数是一个对象且必须带有render属性方法，该方法必须返回一个封闭的容器(容器内可以由其他不限结构的容器)或null/false(表示啥都不渲染):

 var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <div><h1>标题</h1><p>123</p></div> : null
        }
    });

    ReactDOM.render(
        <Component a="1" />, document.body
    );

注意：在该方法里面，所有的this都会在最终调用时自动的绑定到当前组件的构造器上。

React.createElement

参数：type(string/ReactClass),[props(object)],[children(ReactElement)]

创建一个指定类型的React元素，注意第三个参数children可以是任意个React元素。

 var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <p>123</p> : null
        }
    });

    ReactDOM.render(
        React.createElement('div', null,
            React.createElement( 'p', null,
                React.createElement('span', null, 'Hello,'),
                React.createElement('span', null, 'world,'),
                React.createElement( Component, {a : 1})
            )
        ), document.body
    );

React.cloneElement

参数：type(ReactElement),[props(object)],[children(ReactElement)]

克隆并返回一个新的ReactElement(内部子元素也会跟着克隆)，新返回的元素会保留有旧元素的props，ref，key，也会集成新的props(只要在第二个参数中有定义)

 var Hello = React.createClass({
            render: function() {
                var span = <span a="1">VaJoy</span>;
                var newSpan = React.cloneElement(span, {b:'2'}, <em>CNBlog</em>);
                console.log(newSpan.props);
                return <div>Hello {span},{newSpan}</div>; //Hello VaJoy,CNBlog
            }
        });

        ReactDOM.render(<Hello />, document.body);

注意：createElement的第一个参数必须是字符串或ReactClass,而在cloneElement里第一个参数应该是ReactElement:

var Li = React.createClass({
            render: function() {
                return <li>{this.props.i}</li>
            }
        });
        var Ul = React.createClass({
            deal : function(child, index){
                //注意下面这行换成 createElement 会报错！因为child是ReactElement而不是ReactClass或字符串
                return React.cloneElement(child, {i:index});
            },
            render: function() {
                return <ul>{this.props.children.map(this.deal)}</ul>;
            }
        });

        ReactDOM.render((
            <Ul>
                <Li i="9" />
                <Li i="8" />
                <Li i="7" />
            </Ul>
        ), document.body);

React.createFactory

参数：type(string/ReactClass)

返回一个某种类型的ReactElement工厂函数，可以利用返回的函数来创建一个ReactElement(配置props和children)

    var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <p>123</p> : null
        }
    });

    var p = React.createFactory(Component),
        ReactElementP = p({a:1}),
        div = React.createFactory('div'),
        ReactElementDiv = div(null, ReactElementP);

    ReactDOM.render(
        ReactElementDiv, document.body
    );

React.isVailidElement

参数：something

判断参数是否是一个合法的ReactElement，并返回boolean值。

 var Component = React.createClass({
            render: function() {
                return this.props.a==1 ? <p>123</p> : null
            }
        });

        var com = <Component/>,
            com2 = '<Component/>';
        console.log(React.isValidElement(com));  //true
        console.log(React.isValidElement(com2));  //false

React.DOM.tag

参数：attribute(object,null),children(string/ReactElement)

常规是用于在非JSX下来创建ReactElement，tag表示相应的dom类型，此外，首个参数可以定制相关的dom属性，第二个表示dom的内容

var div = React.DOM.div({name : 'div1'}, 'HELLO ', React.DOM.span(null, <em>WORLD</em>));
        React.render(
            div, document.body
        )

React.PropTypes

用于组件内部验证传入props的类型，如果传入的类型不匹配，React会打印出警告

 var Component = React.createClass({
            propTypes : {
                a : React.PropTypes.number.isRequired, //必须传入一个名为“a”、类型为number的props
                callback : React.PropTypes.func   //如果传入了名为“callback”的props，其类型必须是函数
            },
            render : function() {
                return this.props.a==1 ? <p onClick={this.props.callback}>123</p> : null
            }
        });

        var cb = function(){
            alert('click!')
        };

        ReactDOM.render(
            <Component a="1" callback={cb} />, document.body
        )

上面代码中，我们虽然给组件传入了名为a的props，但其类型为字符串，不是期望的number类型，故react会报出警告

更多的props期望类型如下：

React.createClass({
  propTypes: {
    // 可以声明 prop 为指定的 JS 基本类型。默认
    // 情况下，这些 prop 都是可传可不传的。
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // 所有可以被渲染的对象：数字，
    // 字符串，DOM 元素或包含这些类型的数组。
    optionalNode: React.PropTypes.node,

    // React 元素
    optionalElement: React.PropTypes.element,

    // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
    optionalMessage: React.PropTypes.instanceOf(Message),

    // 用 enum 来限制 prop 只接受指定的值。
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // 指定的多个对象类型中的一个
    optionalUnion: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.number,
      React.PropTypes.instanceOf(Message)
    ]),

    // 指定类型组成的数组
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // 指定类型的属性构成的对象
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // 指定Object对象内各属性的类型
    optionalObjectWithShape: React.PropTypes.shape({
      color: React.PropTypes.string,
      fontSize: React.PropTypes.number
    }),

    // 加上 `isRequired` 来要求该 prop 不可为空
    requiredFunc: React.PropTypes.func.isRequired,

    // 不可为空的任意类型
    requiredAny: React.PropTypes.any.isRequired,

    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接
    // 使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
  },
  /* ... */
});

React.children

为处理this.props.children这个封闭的数据结构提供了有用的工具。它有如下几个方法：

1、React.Children.map(object children,function fun)，类似array.map()方法

  var Component = React.createClass({
            deal : function(child, index){
                console.log(child, index);
                return !!index && child;  //第一个li会被过滤掉，因为其索引为0
            },
            render : function() {
                return (
                    <ul>
                      {React.Children.map(this.props.children, this.deal)}
                    </ul>)
            }
        });

        ReactDOM.render(
            (
                <Component>
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                </Component>
            ), document.body
        )

2、React.Children.forEach(object children,function fn)，类似array.forEach()

 var Hello = React.createClass({

            render: function() {
                React.Children.forEach(this.props.children, function(child){
                    console.log(child.props, child.key)
                });
                return <div>Hello {this.props.name}</div>;
            }
        });

        ReactDOM.render(<Hello name="World">
            <li myProp="test"/>
            <li key="blah2" myProp="test2"/>
            <li key="blah3"/>
        </Hello>, document.body);

3、React.Children.count(object children)

返回子元素的总数

var Component = React.createClass({
            render : function() {
                var nums = React.Children.count(this.props.children);
                return (<ul>
                          <li>一共有{nums}个子元素</li> //3
                          {this.props.children}
                        </ul>)
            }
        });

        ReactDOM.render(
            (
                <Component>
                    <li>0</li>
                    <li>1</li>
                    <li>2</li>
                </Component>
            ), document.body
        )

4、React.Children.only(object children)

返回仅有一个子元素，否则(没有子元素或超过一个子元素)报错且不渲染任何东西

ReactDOM.render

参数：ReactElement,DOMElement,callback

渲染一个ReactElement到container指定的DOM中，并返回一个到该组件的引用，如果提供了可选的回调函数，则该函数将会在组件渲染或者更新之后调用：

 var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <p>123</p> : null
        }
    });

    var p = React.render(
        <Component a="1" />, document.body, function(){
            console.log('OK')
        }
    );
    setTimeout(function(){
        console.log(p.props.a);  //打印出“1”
    }, 2000)

因此如果我们希望在组件外部获取到组件内部(能通过this访问)的东西，可以将React.render的返回值赋予一个变量，在后续调用该变量即可。

ReactDOM.unmountComponentAtNode

参数：container(DOMElement)

从container指定的DOM中移除已经挂在的React组件，清除相应的事件处理器和state。如果在container内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回true；如果没有组件被移除，则返回false。

var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <p>123</p> : null
        }
    });

    ReactDOM.render(
        <Component a="1" />, document.body
    );
    setTimeout(function(){
        var isUnmount = ReactDOM.unmountComponentAtNode(document.body);
        console.log(isUnmount);  //打印出true
    }, 2000)

ReactDOM.findDOMNode

ReactDOMServer.renderToString

参数：ReactElement

React为服务端提供一个方法，可以直接输出ReactElement为HTML字符串，将这些标记发送(比如res.write(HTMLString))给客户端，可以获得更快的页面加载速度，并且有利于搜索引擎抓取页面，方便做seo

var Component = React.createClass({
        render: function() {
            return this.props.a==1 ? <p>123</p> : null
        }
    });

    var com = <Component a="1" />,
    comHTML = ReactDOMServer.renderToString(com);
    console.log(comHTML); //输出“<p data-reactid=".0" data-react-checksum="-2122315716">123</p>”

ReactDOMServer.renderToStaticMarkup

参数：ReactElement

类似React.renderToString，但只生成纯粹的HTML标记字符串，不会包含类似data-reactid之类的React属性，从而节省字节数。

 var Component = React.createClass({
            render: function() {
                return this.props.a==1 ? <p>123</p> : null
            }
        });

        var com = <Component a="1" />,
            comHTML = ReactDOMServer.renderToStaticMarkup(com);
        console.log(comHTML);  //输出“<p>123</p>”