React series three (React-components)

一、React.createClass

React 允许将代码封装成组件（component），然后像插入普通HTML标签一样，在网页中插入这个组件。
React.createClass方法用于生成一个组件类XXX，<XXX /> 实例组件类并输出信息。
模板插入<XXX />组件类时，会自动生成XXX的一个实例（下文的"组件"都指组件类的实例）。
所有组件类都必须有自己的 render 方法，用于输出组件。

Note that native HTML element names start with lowercase letters, while custom React class names start with uppercase letters, otherwise an error will be reported, for example, HelloMessage cannot be written as helloMessage. In addition, it should be noted that the component class can only contain one top-level label, otherwise an error will be reported.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React初体验</title>
    <!-- 引入React三个文件-->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="text"></div>
    <script type="text/babel">
        var HelloReact=React.createClass({
            render:function(){
                return <h1>欢迎使用react</h1>;
            }
        });
        ReactDOM.render(
                <HelloReact />,
                document.getElementById("text")
        );
    </script>
</body>
</html>

2. Use this.props object to pass parameters to components

组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，组件的属性可以在组件类的this.props对象上获取。
比如 name 属性就可以通过 this.props.name 读取。
注意，在添加属性时，class属性需要写成className，for属性需要写成htmlFor，这是因为class和for是JavaScript
的保留字。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>向组件传递参数</title>
    <!-- 引入React三个文件-->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="text"></div>
    <script type="text/babel">
        var SayHello=React.createClass({
            render:function(){
                return <p>Hello {this.props.name}</p>;
            }
        });
        ReactDOM.render(
                <SayHello name="pangtong" />,
                document.getElementById("text")
        );
    </script>
</body>
</html>

3. Composite components

可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>复合组件</title>
    <!-- 引入React三个文件-->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="text"></div>
    <script type="text/babel">
        var Name=React.createClass({
            render:function(){
               return (
                 <p>{this.props.name}</p>
               );
            }
        });
        var Link=React.createClass({
            render:function(){
                return (
                   <a href={this.props.site}>
                     {this.props.site}
                   </a>
                );
            }
        });
        var WebSite=React.createClass({
            render:function(){
                return (
                   <div>
                      <Name name={this.props.name} />
                      <Link site={this.props.site} />
                   </div>
                );
            }
        });
        ReactDOM.render(
                <WebSite name="百度" site="https://www.baidu.com" />,
                document.getElementById("text")
        );
    </script>
</body>
</html>

4. React component API

Set state: setState
Replace state: replaceState
Set properties: setProps
Replacement properties: replaceProps
Force update: forceUpdate
Get DOM node: findDOMNode
Determine component mount status: isMounted

Five, set the state setState

用法：
    setState(object nextState[, function callback])
参数说明：
    nextState，将要设置的新状态，该状态会和当前的state合并
    callback，可选参数，回调函数。该函数会在setState设置成功，且组件重新渲染后调用。

合并nextState和当前state，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法。

Regarding setState
, you cannot modify the state through this.state inside the component, because the state will be replaced after calling setState(). setState() does not change this.state immediately, but creates a state that is about to be processed. setState() is not necessarily synchronous, React will perform state and DOM rendering in batches to improve performance. setState() will always trigger a component repaint unless some conditional rendering logic is implemented in shouldComponentUpdate().

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用React的setState实现计数器</title>
    <!-- 引入React三个文件-->
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
    <div id="count"></div>
    <script type="text/babel">
        var Counter = React.createClass({
            getInitialState:function(){
                return {count:0};
            },
            handleClick:function(){
                this.setState(function(state){
                    return {
                        count:this.state.count+1
                    };
                });
            },
            render:function(){
                return (<button onClick={this.handleClick}>点我的次数为{this.state.count}</button>);
            }
        });
        ReactDOM.render(
                <Counter />,
                document.getElementById("count")
        );
    </script>
</body>
</html>

Six, replace the state replaceState

用法：
    replaceState(object nextState[, function callback])
参数说明：
    nextState，将要设置的新状态，该状态会替换当前的state。
    callback，可选参数，回调函数。该函数会在replaceState设置成功，且组件重新渲染后调用。

replaceState()方法与setState()类似，但是方法只会保留nextState中状态，原state不在nextState中的状态都会被删除。

Seven, set the property setProps

用法：
    setProps(object nextProps[, function callback])
参数说明：
    nextProps，将要设置的新属性，该状态会和当前的props合并
    callback，可选参数，回调函数。该函数会在setProps设置成功，且组件重新渲染后调用。

设置组件属性，并重新渲染组件。
   props相当于组件的数据流，它总是会从父组件向下传递至所有的子组件中。当和一个外部的JavaScript应用集成时，
我们可能会需要向组件传递数据或通知React.render()组件需要重新渲染，可以使用setProps()。
   更新组件，我可以在节点上再次调用React.render()，也可以通过setProps()方法改变组件属性，触发组件重新渲染。

Eight, replace the property replaceProps

用法：
   replaceProps(object nextProps[, function callback])
参数说明：
   nextProps，将要设置的新属性，该属性会替换当前的props。
   callback，可选参数，回调函数。该函数会在replaceProps设置成功，且组件重新渲染后调用。

replaceProps()方法与setProps类似，但它会删除原有 props。

Nine, forced update forceUpdate

用法：
    forceUpdate([function callback])
参数说明：
    callback，可选参数，回调函数。该函数会在组件render()方法调用后调用。

    forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，组件的子组件也会调用自己的render()。但是，
组件重新渲染时，依然会读取this.props和this.state，如果状态没有改变，那么React只会更新DOM。
    forceUpdate()方法适用于this.props和this.state之外的组件重绘（如：修改了this.state后），通过该方法
通知React需要调用render()
    一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发
render()调用。

10. Get the DOM node findDOMNode

用法：
    DOMElement findDOMNode()
返回值：
    DOM元素DOMElement

    如果组件已经挂载到DOM中，该方法返回对应的本地浏览器 DOM 元素。当render返回null 或 false时，
this.findDOMNode()也会返回null。从DOM 中读取值的时候，该方法很有用，如：获取表单字段的值和做一些 DOM 操作。

11. Determine the component mount status isMounted

用法：
    bool isMounted()
返回值：
    true或false，表示组件是否已挂载到DOM中

    isMounted()方法用于判断组件是否已挂载到DOM中。可以使用该方法保证了setState()和forceUpdate()在异步场景下的
调用不会出错。

React series three (React-components)

React series three (React-components)

一、React.createClass

2. Use this.props object to pass parameters to components

3. Composite components

4. React component API

Five, set the state setState

Six, replace the state replaceState

Seven, set the property setProps

Eight, replace the property replaceProps

Nine, forced update forceUpdate

10. Get the DOM node findDOMNode

11. Determine the component mount status isMounted

Guess you like