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

2023-12-20 12:09:22

1. 组件

  1. 函数式组件(适用于【简单组件】的定义)
    示例:
    在这里插入图片描述

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

  1. React解析组件标签,找到了MyComponent组件
  2. 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中
  1. 类组件(适用于【复杂组件】的定义)
    示例:
    在这里插入图片描述

执行了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. 组件自定义的方法中thisundefined,如何解决?
    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
}
  1. 扩展属性: 将对象的所以属性通过props传递<MyPerson {...per} />
  2. 默认属性值
Person.defaultProps = {
    sex: '男',
    age: 15
}

示例:
在这里插入图片描述

在这里插入图片描述

  1. 组件类的构造函数(其实这函数可写可不写,因为目前来说,没必要)
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的回调,所以不是通过实例调用的,是直接调用
类的方法默认开启了局部严格模式,所以自定义事件中的thisundefined
可以打印this试一试
那我们如何解决呢:
1. bind强制改变,看上述state的示例
2. 箭头函数
示例:
在这里插入图片描述

文章来源:https://blog.csdn.net/qq_35940731/article/details/135100306
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。