react学习-react实例的三大核心属性
组件实例的三大核心属性
在React中，组件实例的三大核心属性包含state、props、ref，通过这三大核心属性的使用，我们能够实现对组件的状态进行更新。
一、state
概念
- state是组件对象 最重要的属性，值是对象(可以包含多个key-value的组合)
- 组件被被称为"状态机"，通过更新组件的state更新对应的页面显示，state的状态数据不能直接修改或更新，需要借助setState来更新或修改,且更新是一种合并，不是替换。
在组件中需要注意的地方
- 组件中的render方法中的this为组件实例对象
- 组件自定义的方法中this为undefined,可以通过函数对象的bind()强制绑定this,也可以使用箭头函数
- 组件的状态数据，不能直接修改或更新
state的使用
state
*简洁化
state简写方式
二、props
1.何为props
- 每个组件对象中对会含有props属性
- 组件标签的所有属性都保存在props中
2.作用
- 通过标签属性从组件外向组件内传递变化的数据
- 组件内部不建议修改props的数据，数据的更新借助于state
3.对props中的属性的值进行类型限制和必要性限制
在使用props向外传递变化的数据时，有时组件内部对于数据有一定的要求，就需要对props的属性值进行类型限制和必要性限制
常用方法是使用prop-types库进行限制（需引入prop-types库）
Person.propTypes = {
name:PropTypes.string.isRequired, //限制name必传，且为字符串
sex:PropTypes.string,//限制sex为字符串
age:PropTypes.number,//限制age为数值
speak:PropTypes.func,//限制speak为函数
}
props的使用
对props进行限制
三 refs于事件处理
在组件内使用，组件内的便签可以定义ref属性来表示自己
ref编码形式
- 字符串形式
- 回调形式（常用）
- createRef创建ref容器