react 中的 三大重要属性state refs props

React中 的三大属性还是挺重要的呢

 

那今天我们就来说一下 这React中的三大属性叭！

分别是 state refs props

 

No.1 ： state

 

state 它的作用是 初始化指令

constuctor(){
    super() // 这是必写的 super
    
    this.state = {
        stateName  : value
    }
}

读取的话就是使用

this.state.stateName

这就是给它 初始化值的方式

如果想修改state中的值，在事件成员函数中如何修改state呢

fn(){
    this.setState(){
        stateName : 'newname'
})

不能采用 this.state.属性 = 值    这种办法来修改的哦

 

接下来就是第二个Props 啦

 

Props 是组件标签上的属性，都纪律在自定义组件中一个props属性上

 

<Children name='loser' age='21'></Children>

　

这里在组件上写的属性为 name age 两个属性

那如何访问props呢

<p>{this.props.age}</p>
<p>{this.props.name}</p>

就这样 直接获取就可以获取到啦

 

注意 props 中的值不能改变      state中值的可以改变

这里补充一点点 props中的知识

propstType 和 defaultProps

 

propsType 是 验证props中的数据类型必须合法

defaultProps 是 设置props的初始值

 

这里简单说一下 defaultProps的用法叭

 

 这个是第一种用法；也是经常使用的用法

App.defaultProps = {
    name : 'handsome',
    age : 22
}

　　

这是第二种用法

class App extends React.component{
    static defaultProps = {
        name : 'handsome'
    }
}

 

那 props 就说完啦，接下来是第三个 Refs

Refs 它就是通过操作虚拟dom来获取真实dom

如何获取真实dom

　　第一种就是 ref 后面是字符串

　　1.给想要获取的元素身上加ref属性

<h3 ref='aa'>Hello World</h3>

aa 这个值就会在  refs 对象中 充当一个属性 属性值是dom元素

 

 

第二种ref 后面是一个箭头函数

<h3 ref={(h3)={this.h3xx = h3}></h3>

 h3xx 是一个临时存放dom元素的属性 ，在这个属性直接挂载在组件对象上

 

 

 这就是 ref用法