React组件三大核心属性: state、props、refs

一、state

1. 理解
   1.state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
   2.组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2. 注意
   1.组件中render方法中的this为组件实例对象
   2.组件自定义的方法中this为undefined，如何解决？
   2.1.强制绑定this: 通过函数对象的bind()
   2.2箭头函数
   3.状态数据，不能直接修改或更新

二、props

1. 理解
   1.每个组件对象都会有props(properties的简写)属性
   2.组件标签的所有属性都保存在props中
2. 作用
   1.通过标签属性从组件外向组件内传递变化的数据
   2.注意: 组件内部不要修改props数据
3. 操作
   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传递

4.默认属性值

Person.defaultProps = {
  age: 18,
  sex:'男'
}

5.组件类的构造函数

constructor(props){
  super(props)
  console.log(props)
}

三、refs

1. 理解
   1.组件内的标签可以定义ref属性来标识自己
2. 编码
   1.字符串形式的ref

// 定义


// 获取值
this.refs.input1.value

2.回调形式的ref

// 定义
{this.input1 = c}}/>

// 获取值
this.input1.value

3.createRef创建ref容器·

// 定义
myRef = React.createRef() 


// 获取值
this.myRef.current.value