状态的介绍和应用

状态的介绍

对于 React 来讲一切的变化都是基于状态的，如果说你在其他某个地方修改了这个状态，那么在你最初定义这个地方的状态也会跟着被修改，这个是 React 非常核心的技能点。

上面这个是说例如：少年、中年、老年这样按照年龄段的多种状态，每个状态相对应的里面的内容也应该发生一个变化

状态是需要我们用程序来控制的

状态驱动 render 更新的过程

状态的用法

ES5 & ES6

源码

//ES5 写法
var HelloMassage = React.createClass({
    //设置默认属性
    getDefaultProps: function() {
        return {
            name: "123"
            // name: 1//由于在下面指定了类型为 string 这里如果设置为 1 的话就会报错
        };
    },
    //属性校验器，表示必须是 string
    propTypes: {
        name: React.PropTypes.string,
    },
    //初始化状态
    getInitialState: function() {
        return {
            isLoading: false
        };
    },
    //增加一个修改 state 的事件
    handle: function() {
        console.log(this);
        this.setState({
            isLoading: true, //这里修改之后全局都会跟着改变下面在对 isLoading 做三元判断 render 的相应内容也会自动的跟着改变，他会在全局去监控这个 state 
        });
        console.log("状态修改成功");
    },
    render: function() {
        return (
            // <div>{this.props.name}</div>
            //调用一个对象多个属性的写法
            // <div>Hello，{this.props.name1}，{this.props.name2}</div>
            <div>
            {/*通过状态来 返回相应的内容*/}
            {!this.state.isLoading ? <h1>loading...</h1> : <h1>ok</h1>}
            { /*
            *调取 name 属性的默认值 
            *增加点击事件
            */ }
            <div onClick={this.handle}>Hello，{this.props.name}</div>
            </div>
        );
    }
});
//传递一个对象
var props = {
    name1: "xiaochuan",
    name2: "xiaoming"
};
ReactDOM.render(
    // <HelloMassage name="xiaochuan" />,
    //传递一个对象的写法
    <HelloMassage {...props} />, //Hello，xiaochuan，xiaoming
    document.getElementById("example")
);

//ES6 写法
"use strict";
class HelloMassage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            title: props.title + 200
        }
    }
    render() {
        //数组的调用方法
        // var commentNode = this.props.name.map(function(datavalue, datakey) {
        //     return <div key={datakey}>Hello，{datavalue}！</div>
        // });
        return (
            //数组的调用方法
            // <div>{commentNode}</div>
            // <h1 className="h1">{this.props.name}</h1>
            <div>
            {/*测试默认属性*/}
            <h1>{this.props.title}</h1>
            {/*测试获取 state 属性的参数值*/}
            <h1>{this.state.title}</h1>
            </div>
        )
    }
}
//通过变量传递
var data = "通过一个变量传递属性";
//属性校验器，表示必须是 string
HelloMassage.propTypes = {
    title: React.PropTypes.string,
};
//设置默认属性
HelloMassage.defaultProps = {
    title: "321"
};
ReactDOM.render(
    // <HelloMassage name="xiaochuan" />,//xiaochuan
    // <HelloMassage name={123} />,//123
    // <HelloMassage name={"孙小川"} />, //孙小川
    // <HelloMassage name={["1","2","3"]} />, //需要在上面使用 map 方法映射键值对
    //数组输出：Hello， 1！ Hello， 2！ Hello， 3！ 
    // <HelloMassage name={data} />,
    //测试默认属性
    <HelloMassage />,
    document.getElementById("example")
);