react 的三大属性

ゝ一纸荒年。 2023-06-05 08:50 164阅读 0赞

属性1：state

** 1、认识**：

1）state是组件对象中最重要的属性，值是一个对象(可以包含多个数组，有点像vue中的data属性)

2）组件被称为“状态机”，通过更新组件的state来更新对应的页面显示

2.操作state通常要经历三个状态

![1483907-20190905204646416-481958236.png][]

**3、注意点：**

1.更新state状态定义的函数里面的this不是指向当前对象的，需要用bind强制绑定this为当前组件

2.强制绑定this: this.handleClick= this.handleClick.bind(this)

属性二：props

1.理解：

1）每个组件对象都会有props（properties的简写）属性

2）每个组件标签中所有的属性都保存在props中

2.作用：

1）通过标签属性从组件外向组件内传递变化的数据

2）组件内部不需要修改props数据

3.props的操作

// 1）内部读取某个属性值
    　　this .props.propertyName
    // 2)对props中的属性值进行类型限制和必要性限制
    
    方法一：新版本中已经被弃用
    　　Person组件名：
    　　Person.propTypes = {
        　　name: React.PropTypes.string.isRequired,
        　　age:React.PropTypes.number.isRequired
    　　}
    
    方法二：
    　　需要用到prop - types.js文件
    　　Person.propTypes = {
          name:PropTypes.string.isRequired
       }
    // 3）扩展属性：对象的所有属性通过props传递
    　　<Person {...person} /> //默认传递了所有属性
    // 4)默认属性值 
    　　Person.defaultProps = {
         　　name: "Mary"
    　　}
    
    
    // 5)组件类的构造函数，
    　　constructor(props){
         　　super(props)
        　　 console.log(props) // 里面存放所有属性
    　　}
    属性三：ref与事件处理
    　　1、理解：

1）组件内的标签都可以定义ref属性来标识自己

2）在组件中可以通过this.msgInput来得到真实的DOM元素

3）作用：通过ref获取到组件特定的标签对象，进行读取相关数据

** 2、事件处理**

1）通过onXxx属性指定组件的事件处理函数

2）React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）

3）通过event.target可以得到发生事件的DOM元素

总结

*  **React中props和state都是存储数据的区别如下**

1）state: 组件自身内部可变化的数据

2）props: 从组件外部向组件内部传递数据，组件内部只读取不修改

*  注意点：