2.组件的生命周期

1. 基础

react中创建新组件的api：

var Component = React.createClass({
   //组件详细说明
})

上述js片段中“//组件详细说明”是一个js对象，该对象需要包含一个名为render()的方法以及一系列可选的方法和属性：

let Component = React.createClass({
        render: () => {
            return React.DOM.span(null, "我是组件内容")
        }
  });

唯一必须要做的事情就是实现render()方法。该方法必须返回一个React组件，不能只返回文本内容。

在应用中使用自定义组件的方法和使用DOM组件的方法类似：

ReactDOM.render(
        React.createElement(Component),
        document.getElementById("app")
 )

React.createElement()是创建组件"实例"的方法之一，如果想创建多个实例，还有另一种途径，工厂方法：

var ComponentFactory = React.createFactory(component);
ReactDOM.reader(
   ComponentFactory (),
   document.getElementById("app")
)

React.DOM.*方法实际上是在React.createElement()的基础上，进行了一层封装。

ReactDOM.render(
   React.createElement("span",null,"hello"),
   document.getElementById("app")
)

2. 属性prop

组件可接收属性，并根据属性值进行相对应的渲染或表现。所有属性都可以通过this.props对象获取：

 var Component = React.createClass({
        render: function(){
            return React.DOM.span(null, "My name is " + this.props.name)
        }
    })
    //渲染组件时传递属性
    ReactDOM.render(
        React.createElement(Component, { name: 'Bob' }),
        document.getElementById("app")
    )

在定义组件时 render方法不能使用箭头函数，因为此时的this可能会指向window。
this.props看做只读属性。从父组件传递到配置子组件时，属性非常重要。当你想设置this.props属性时，请使用额外的变量或者组件详细说明对象的属性，比如this.thing对应于this.props.thing

3. propTypes

在组件中还可以添加名为propTypes的属性，用来声明组件需要接收的属性列表以及对应类型：

var Component = React.createClass({
   propType:{
     name:React.PropTypes.string.isRequired,  
},
   render:function(){
    return React.DOM.span(null,"my name is"+ this.props.name)
   }
});
    //渲染组件时传递属性
ReactDOM.render(
        React.createElement(Component, { name: 'Bob' }),
        document.getElementById("app")
    )

• 通过预先声明组件期望接收的参数，让使用组件的用户不需要在render()方法的源代码中到处寻找改组件可配置的属性（你可以理解为参数说明）
• React会在运行时检验属性值的有效性。不需要对组件接收的数据类型有所顾虑。

4. state

React有一个state的概念，也就是组件渲染自身时用到的数据。当state发生改变时，react会自动重建用户界面。

1. 当你使用render初始化界面后，你只需要关心数据的变化即可。
2. 调用setState后的界面更新是通过一个队列机制高效地进行批量修改的。
3. 直接改变this.state会导致以外行为的发生。（和this.props一样看作为只读属性）
4. setState被调用时，react会调用你的render方法并更新界面。

5. 带状态的文本框组件

  var textAreaCounter = React.createClass({
        propType: {
            text: React.PropTypes.string.isRequired,
        },
        getDefaultProps: function () {  //返回的值将被设置this.props的默认值
            return {
                text: ""
            }
        },
        getInitialState:function(){  //返回的值将被设置this.state的初始值
            return {
                text:this.props.text,
            }
        },
        _textChange:function(ev){ 
            this.setState({ //设置this.state值
                text:ev.target.value
            })
        },
        render: function () {
            return React.DOM.div(null,
                React.DOM.textarea(
                    {
                        value:this.state.text,
                        onChange:this._textChange,
                    }
                ),
                React.DOM.h3(null, this.state.text.length)
            )d
        },
    });
    ReactDOM.render(
        React.createElement(textAreaCounter, {
            text: 'Bob'
        }),
        document.getElementById('app'),
        function () {
            console.log(ReactDOM.findDOMNode)
            console.log("组件装载完毕")
        }
    )

input中如何使用value值defaultValue值

• 如果在使用input时只需要获取model里的值时，使用defaultValue就可以了。
• 如果需要获取model的值并且还需要改变它的时候，就需要使用value结合onChange事件就可以了。

6. Prpos与State区别

属性是给外部世界设置组件的机制，而状态扶着组件内部数据的维护。与面向对象类比，this.props就是传递给类构造函数的参数，而this.state则包含了你的私有属性。

7. 在初始化state时使用Prpos：一种反模式

在getInitalState()方法中使用了this.props

getInitalState(){
   return {
        text:this.props.text
    }
}

8. 从外部访问组件

让你的react应用和外界进行通信的一种方法，实在使用ReactDOM.render()方法进行渲染时，把引用赋值给一个变量，然后在外面通过该变量访问组件:

var myTextAreaCounter = ReactDOM.render(
   React.createElement(textAreaCounter,{
    defaultValue:"Bob"
    }),
   document.getElementById("app")
)

现在你可以通过myTextAreaCounter访问组件的方法和属性。

//修改name属性
myTextAreaCounter.setState({name:"Martin "}) 
//获取组件父元素
ReactDOM.findDOMNode(myTextAreaCounter)

浏览器调试中: