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. 箭头函数
示例: