React js属性和状态的使用和区别

 

React js的属性和状态

 

 

属性:props    一般属性是不改变的,经常作为传入的数据.

 

例: 建立PropsTest控件,从网页上输出简单的  Hello, XXX, XXX为传入的属性name,当name为空时,输出Hello,World   输入为其他值时,比如:Curry,输出Hello,Curry

<script type="text/babel">
    var PropsTest = React.createClass( {
        render: function () {
            return (
                    <div>
                        Hello, {this.props.name? this.props.name: "World"}
                    </div>
            );
        }
    });
    ReactDOM.render(
            <PropsTest name="Curry"/>,
            document.body
    );
</script>

 

 

 

状态:state  一般状态是不断变化的,空间内部可以控制state的变化

例: 建立StateTest控件,实现在输入框中输入数据XXX,输入Hello, XXX.  XXX随着输入框的输入内容而改变.  

 

在render方法中定义<div>Hello, {this.state.name}</div>,   定义input,并添加onChange方法textChange, 在方法里面代码实现name的值随输入的值改变

 

代码如下:

<script type="text/babel">
    var StateTest = React.createClass( {
        getInitialState: function () {
            return {
                name: 'World'
            }
        },
        textChange: function (event) {
            this.setState({
                name: event.target.value
            });
        },
        render: function () {
            return (
                    <div>
                        <p>Hello, {this.state.name}</p>
                        <input type="text" onChange={this.textChange} />
                    </div>
            );
        }
    });
    ReactDOM.render(
            <StateTest />,
            document.body
    );
</script>

 

区分:  组件在运行时需要修改的数据时状态

状态和属性的相似点: 1,是纯js对象

                                2,改变会触发render方法

                                       

                     不同点: 1,属性值可以由父类传入,状态值不能

                                       2,属性值不在组件内部修改,而状态值就是在组件内部修改的