组件的属性和方法

render

React.createClass用于生成组件类，每一个组件都要有render函数

props

组件的属性可以在组件类this.props对象上获取，如：this.props.属性名。添加组件属性，需要注意：class属性需要写成className，for属性需要写成htmlFor，因为class和for是JavaScript的保留字

<script type="text/babel">
    //组件类的第一个字母需要大写，否则会报错
    var HelloMessage = React.createClass({
        render : function(){//所有组件必须有自己的render方法，用于输入组件
            return <div><h1>Hello,{this.props.name}</h1><h2>woca,age is:{this.props.age}</h2></div>;
        }
    });
    ReactDOM.render(
        <HelloMessage name="sqliang" age="23"/>,document.getElementById('example') ); </script>

this.props.children

this.props.children表示组件的所有子节点：

<script type="text/babel">
    var NotesList = React.createClass({
        render : function(){
            return (
                <ol> { React.Children.map(this.props.children,function(child){ return <li>{child}</li>;
                        })
                    }
                </ol> ); } }); ReactDOM.render( <NotesList> <span>Hello</span>
            <span>hehe</span> <span>heihei</span> </NotesList>,document.body ); </script>

getDefaultProps方法设置组件属性默认值

<div id="example"></div> <script type="text/babel"> var MyTitle = React.createClass({ getDefaultProps : function(){ return { title : 'Hello,World',name : 'sqliang' }; },render : function(){ return <h1>{this.props.title},{this.props.name}</h1>;
            }
        });
        ReactDOM.render(
            <MyTitle />,document.getElementById("example") ); </script>

组件生命周期

React组件是一个状态机，接受两个输入参数：this.props和this.state，返回一个虚拟DOM

创建类

通过 React.createClass 创建的是类,React组件是有类和实例区别的。组件不允许修改自己的 props，只能通过父组件来修改。这是为了保持props的一致性。如果有需要自行修改的值，应该存在 this.state 中。

var InputState = React.createClass({
    /** * 组件初始化的时候执行，必须返回一个null或者对象 * @returns {{enable: boolean,width: string,height: string,margin: string,display: string}} * 通过this.state.属性名来访问属性值 */
    getInitialState : function(){
        return {
            enable : false,width : '200px',height : '100px',margin : '5px auto',display : 'inline-block'
        };
    },handleClick : function(event){//点击事件每次修改属性值后，会自动调用this.render(),再次渲染组件
        this.setState({//修改初始属性值得时候要调用this.setState()来修改
            enable: !this.state.enable
        });
    },render : function(){
        return (
            <p style={{width:this.state.width,height:this.state.height,margin:this.state.margin}}> <input placeholder="输入用户名" style={{display:this.state.display}} disabled={this.state.enable} className="form-control" type="text" /> <button onClick={this.handleClick} className="btn btn-default">Change State</button> <h3>{this.props.name}</h3> </p> ); } });

实例化

类创建后就可以进行实例化主要过程有以下几种组成：

1. getInitialSrate：获取this.state的默认值
2. componentWillMount：在render之前调用此方法，在render之前需要做的事情就在这里处理
3. render：渲染并返回一个虚拟DOM

4. componentDidMount：在render之后，react会使用render返回的虚拟DOM来创建真实DOM，完成之后调用此方法

   注意：
   1. this.state只存储原始数据，不要存储计算后的数据

   2. componentWillMount用来处理render之前的逻辑，不要在render中处理业务逻辑。render就是一个模板的作用，值处理和展示相关的逻辑，比如格式化时间等，如果有业务逻辑，那么放在componentWillMount中执行，所以render中一定不会出现改变state之类的操作

   3. render返回的是虚拟DOM，所谓虚拟DOM，其实就是React.DOM.div之类的实例，就是一个js对象，render方法完成之后，真实的DOM并不存在。

   4. componentDidMount中处理和真实DOM相关的逻辑。这时候真实的DOM已经渲染出来，可以通过this.getDOMNode()方法来使用了。典型的场景就是可以在这里调用jQuery插件

更新

组件实例化完成后进入了存在期，可以响应用户操作和父组件的更新来更新视图，主要有以下过程组成：

1. componentWillReceiveProps:父组件或者通过组件的实例调用setProps改变当前组件的props时调用
2. shouldComponentUpdate:是否需要更新组件（慎用）
3. componentWillUpdate:调用render方法之前
4. render：同上

5. componentDidUpdate：真实DOM已经完成更新

   销毁

   销毁的过程调用：componentWillUnmount

组件生命周期示例代码：

var HelloComponent = React.createClass({
    getDefaultProps: function(){
        return {};
    },getInitialState : function () {
        return {};
    },componentWillMount : function () {
        console.log("render之前，业务逻辑代码")
    },render : function () {
        return (<div>Hello,{this.props.name}</div>); },componentDidMount : function () { console.log("真实DOM已好,你想调用jQuery插件吗？？"); },componentWillReceiveProps : function () { console.log("改变当前组件的props时调用"); },componentWillUpdate : function () { console.log("调用在render之前，可以添加逻辑代码"); },componentDidUpdate : function () { console.log("真实DOM已经完成更新"); } }); var helloCom1 = ReactDOM.render( <HelloComponent name="sqliang"/>,document.getElementById('div1') ); var helloCom2 = ReactDOM.render( <HelloComponent name='zcy'/>,document.getElementById('div2') );

组件的组合与通信