React学习计划-React16--React基础（二）组件与组件的3大核心属性state、props、ref和事件处理
1. 组件
- 函数式组件（适用于【简单组件】的定义）
示例：
执行了
ReactDOM.render(<MyComponent/>, ...)之后执行了什么？
- React解析组件标签，找到了MyComponent组件
- 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中
- 类组件（适用于【复杂组件】的定义）
示例：
执行了ReactDOM.render(, …)之后执行了什么？
- React解析组件标签，找到了MyComponent组件
- 发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
- 将render返回的虚拟DOM转为真实DOM，随后呈现在页面中
2. 组件三大核心属性1：state（类组件）
1. 理解
state是组件对象最重要的属性，值是对象（可以包含多个key:value组合）- 组件被称为’状态机’，通过更新组件的
state来更新对应的页面显示（重新渲染组件）
2. 强烈注意
- 组件中
render方法中的this为组件实例对象 - 组件自定义的方法中
this为undefined，如何解决？- 强制绑定
this：通过函数对象的bind()，如下示例 - 箭头函数：见下方事件示例
- 强制绑定
- 状态数据，不能直接修改或更新,必须用
setState,且更新是一种合并，不是替换
我们还要多考虑一个问题：组件内渲染的次数
constructor： 构造器调用几次？ —— 1次render： 调用几次？ —— 1+n 次 1是初始化的那次，n是状态更新的次数changeWeather事件：调用几次？—— 点几次，调用几次
示例：
当然，我们有简写
3. 组件三大核心属性2：props
- 每个组件对象都会有
props(properties的简写)属性 - 组件标签的所有属性都保存在
props中
如图：
1. 作用
- 通过标签属性从组件外向组件内传递变化的数据
- 注意：组件内部不要修改
props数据
示例：
2. 编码操作
- 内部读取某个属性值
this.props.name - 对
props中的属性值进行类型限制和必要性限制
<!-- 需要先引入prop-types.js对props传入的值进行限制 -->
<script src="../js/prop-types.js"></script>Person.propTypes = {name: PropTypes.string.isRequiredage: PropTypes.number
}
- 扩展属性： 将对象的所以属性通过
props传递<MyPerson {...per} /> - 默认属性值
Person.defaultProps = {sex: '男',age: 15
}
示例：
- 组件类的构造函数(其实这函数可写可不写，因为目前来说，没必要)
constructor(props) {super(props)console.log(props) // 打印所有属性
}
看一个实例：
因为这个属性的限制是加在类身上的嘛，所以给他定义成静态属性，放在类内部，提升便捷性，就不把他放在类外部了，否则，类名一换，欲哭无泪
所以函数组件内部还是只能在外部添加，这么看来，类组件还是很好的。但是后面随着hooks的到来，函数组件成为主流，那么如何对props进行限制就另外探究了：（下图附函数组件限制props）
4. 组件三大核心属性2：ref与事件处理
1. 理解
组件内的标签可以定义ref属性来标识自己
2. 编码
-
字符串形式的
ref：<input ref="input1" />（最简单但不推荐）
示例
-
回调形式的
ref：<input ref={(c) => this.input1 = c} />（也还不错）
如图：
-
createRef创建ref容器：（推荐）
myRef = React.createRef()
<input ref={this.myRef} />
如图：
3. 事件处理
- 通过
onXxx属性指定事件处理函数（注意大小写）React使用的使自定义（合成）事件，而不是使用的原生DOM事件——为了更好的兼容性React中的事件是通过事件委托方式处理的（委托给最外层的元素）——为了高效
- 通过
event.target得到发生事件的DOM元素对象——不要过度使用ref
针对使用箭头函数说明一下：
组件内的自定义事件放在哪里？ ——Demo类的原型对象上，供实例使用
eq1: 由于自定义事件是作为onClick的回调，所以不是通过实例调用的，是直接调用
类的方法默认开启了局部严格模式，所以自定义事件中的this为undefined
可以打印this试一试
那我们如何解决呢：
1.bind强制改变，看上述state的示例
2. 箭头函数
示例：
