一、state
理解
1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)注意
1.组件中render方法中的this为组件实例对象
2.组件自定义的方法中this为undefined，如何解决？
2.1.强制绑定this: 通过函数对象的bind()
2.2箭头函数
3.状态数据，不能直接修改或更新
二、props
- 理解
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中 - 作用
1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改props数据 - 操作
1.读取数据
this.props.name
2.对props中的属性值进行类型限制和必要性限制
//第一种方式（React v15.5 开始已弃用）：
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number
}
// 第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）
Person.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number.
}
3.扩展属性: 将对象的所有属性通过props传递
<Person {...person}/>
4.默认属性值
Person.defaultProps = {
age: 18,
sex:'男'
}
5.组件类的构造函数
constructor(props){
super(props)
console.log(props)
}
三、refs
- 理解
1.组件内的标签可以定义ref属性来标识自己 - 编码
1.字符串形式的ref
// 定义
<input ref="input1"/>
// 获取值
this.refs.input1.value
2.回调形式的ref
// 定义
<input ref={(c)=>{this.input1 = c}}/>
// 获取值
this.input1.value
3.createRef创建ref容器·
// 定义
myRef = React.createRef()
<input ref={this.myRef}/>
// 获取值
this.myRef.current.value
