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

阅读更多

 

React js的属性和状态

 

 

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

 

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

 

 

 

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

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

 

在render方法中定义

Hello, {this.state.name}

,   定义input,并添加onChange方法textChange, 在方法里面代码实现name的值随输入的值改变

 

代码如下:

 

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

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

                                2,改变会触发render方法

                                       

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

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