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

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

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

分别是 state refs props

No.1 ： state

state 它的作用是 初始化指令

            
                1
                constuctor(){

                2     super() // 这是必写的 super34this.state = {
5        stateName  : value
6    }
7 }
        

读取的话就是使用

            
                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用法

原文：https://www.cnblogs.com/blankOne/p/11469185.html