React学习计划-React16--React基础（二）组件与组件的3大核心属性state、props、ref和事件处理

1. 组件

1. 函数式组件（适用于【简单组件】的定义）
   示例：
   

执行了ReactDOM.render(<MyComponent/>, ...)之后执行了什么？

1. React解析组件标签，找到了MyComponent组件
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中

2. 类组件（适用于【复杂组件】的定义）
   示例：
   

执行了ReactDOM.render(, …)之后执行了什么？

1. React解析组件标签，找到了MyComponent组件
2. 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3. 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中

2. 组件三大核心属性1：state（类组件）

1. 理解

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

2. 强烈注意

1. 组件中render方法中的this为组件实例对象
2. 组件自定义的方法中this为undefined，如何解决？
   1. 强制绑定this：通过函数对象的bind()，如下示例
   2. 箭头函数：见下方事件示例
3. 状态数据，不能直接修改或更新,必须用setState,且更新是一种合并，不是替换

我们还要多考虑一个问题：组件内渲染的次数

1. constructor： 构造器调用几次？ —— 1次
2. render： 调用几次？ —— 1+n 次 1是初始化的那次，n是状态更新的次数
3. changeWeather事件：调用几次？—— 点几次，调用几次

示例：

当然，我们有简写

3. 组件三大核心属性2：props

1. 每个组件对象都会有props(properties的简写)属性
2. 组件标签的所有属性都保存在props中
   如图：

1. 作用

1. 通过标签属性从组件外向组件内传递变化的数据
2. 注意：组件内部不要修改props数据
   示例：
   

2. 编码操作

1. 内部读取某个属性值this.props.name
2. 对props中的属性值进行类型限制和必要性限制

<!-- 需要先引入prop-types.js对props传入的值进行限制 -->
<script src="../js/prop-types.js"></script>

Person.propTypes = {
    name: PropTypes.string.isRequired
    age: PropTypes.number
}

3. 扩展属性： 将对象的所以属性通过props传递<MyPerson {...per} />
4. 默认属性值

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

示例：

5. 组件类的构造函数(其实这函数可写可不写，因为目前来说，没必要)

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

看一个实例：

因为这个属性的限制是加在类身上的嘛，所以给他定义成静态属性，放在类内部，提升便捷性，就不把他放在类外部了，否则，类名一换，欲哭无泪
所以函数组件内部还是只能在外部添加，这么看来，类组件还是很好的。但是后面随着hooks的到来，函数组件成为主流，那么如何对props进行限制就另外探究了：（下图附函数组件限制props）

4. 组件三大核心属性2：ref与事件处理

1. 理解

组件内的标签可以定义ref属性来标识自己

2. 编码

1. 字符串形式的ref： <input ref="input1" />（最简单但不推荐）
   示例
   

2. 回调形式的ref：<input ref={(c) => this.input1 = c} />（也还不错）
   如图：
   

3. createRef创建ref容器：（推荐）

myRef = React.createRef()
<input ref={this.myRef} />

如图：

3. 事件处理

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

针对使用箭头函数说明一下：
组件内的自定义事件放在哪里？ —— Demo类的原型对象上，供实例使用
eq1: 由于自定义事件是作为onClick的回调，所以不是通过实例调用的，是直接调用
类的方法默认开启了局部严格模式，所以自定义事件中的this为undefined
可以打印this试一试
那我们如何解决呢：
1. bind强制改变，看上述state的示例
2. 箭头函数
示例：