React中组件的三大属性（state, props, ref)

state

理解：

• state是组件对象最重要的属性，值是一个对象，包含多个key value组合，也就是说可以包含多个状态。
• 组件也被称为状态机，通过更新组件的state来更新对应的页面显示。
• 有state状态的组件叫做复杂组件，无状态组件叫做简单组件

注意：

• 组件中render方法内的this指向该组件实例对象
• 组件自定义的方法需要通过箭头函数来指向该组件实例对象
• 状态数据不能直接以赋值的形式修改或者更新，必须通过setState来修改状态，参数是一个state对象。

props

理解：

• 每个组件对象都会有props属性
• 组件标签的所有属性都会保存在props中

作用：

• 通过标签属性从组件外向组件哪传递变化的数据，常见场景就是父组件向子组件传递数据
• 注意组件内部不要修改props数据

操作：

• 内部读取某个属性: this.props.name
• 可以通过prop-types库来对传入的数据的类型和必要性进行限制
• 扩展属性：<Person {...p}>，适用于大量props传入标签的情况，需要在之前提前保存好prop对象，通过键值对形式保存
• 设置默认属性值：Person.defaultProps

ref

理解：组件内的标签可以定义ref属性，常见于获取表单数据

编码：

---字符串形式的ref <input ref="input1"/>
---回调形式的ref <input ref={c => this.input1 = c}/>
---createRef创建ref容器 
        myRef = React.createRef()
        <input ref={this.myRef}/>

受控组件和非受控组件：

• 收集表单数据中的概念，利用onChange和setState来绑定数据和页面叫做受控组件
• 用ref获取表单数据，叫做非受控组件