React 组件实例的三大属性

1.state（状态）

1）原生事件的绑定

    
    
    
    


    按钮1
    按钮2
    
    按钮3
    
    

2）实例学习

要求创建一个网页，显示“今天天气很炎热”，用户点击标题，可以更改为“今天天气很凉爽”

a.标准写法

b.实际简写

3)总结

a.理解
	state是对组件对象最重要的属性，值是对象（可以包含多个key-value的组合）。
	组件被称为“状态机”，通过更新组件的state来更新对应的页面显示（重新渲染组件）。

b.强烈注意
	组件中render方法的this为组件的实例对象。
	组件自定义的方法中this为undefined怎么解决？
		a)强制绑定this:通过函数对象的bind()。
		b)箭头函数
	状态数据不能直接修改或更新。	

2.props(属性)

1)props的基本使用

与批量传递标签属性

2)展开运算符

知识回顾，与使用方法介绍

3)对props进行限制

引入prop-types，用于对组件标签属性进行限制
添加Person.propTypes ，对标签属性进行限制
	函数的限制方法
添加 Person.defaultProps，指定标签的默认值

4)props的简写方法

将propTypes 与 defaultProps 写入类中
	引入 static propTypes 与 static defaultProps

5)props与构造器

研究使用构造器时，构造器中与super中写不写props的差异

6)函数式组件使用props

研究函数式组件如何使用props
以及如何进行限制与默认值设置

7)总结

理解：
a. 每个组件对象都会有props(properties的简写)属性
b. 组件标签的所有属性都保存在props中

作用：
a. 通过标签属性从组件外向组件内传递变化的数据
b. 注意: 组件内部不要修改props数据

编码操作：
a. 内部读取某个属性值
this.props.name

b. 对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. 
}

c.扩展属性: 将对象的所有属性通过props传递

d.默认属性值

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

e.组件类对构造函数

constructor(props){
  super(props)
  console.log(props)//打印所有属性
}

3.ref

1)字符串形式的ref

最简单的形式
代码过多时，影响效率
过时的API，不建议使用

2)回调函数形式的ref

3)在回调形式的ref中，回调执行次数的问题

研究在回调形式的ref中，回调执行次数的问题
	内联的形式与类的绑定形式ref

4. createRef

    最新的API，官网推荐使用
   
    myRef = React.createRef()
    React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点
    该容器是专人专用的，只能存储一个。
    实际使用需要大量容器，代码重复率高。
   

4. React事件处理

 1.	通过onXxx属性指定事件处理函数(注意大小写)
        1)	React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ———— 为了更好的兼容性
        2)	React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ———— 为了高效
 2.	通过event.target得到发生事件的DOM元素对象 ———— 不要过度使用ref

3.1 收集用户表单数据

需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息

1）非受控组件

2）受控组件