web前端开发培训 | React面向组件编程

2.1. 基本理解和使用

2.1.1. 使用React开发者工具调试

​编辑

 

2.1.2. 效果

函数式组件：

​编辑

 

类式组件：

​编辑

 

2.1.3. 注意

1. 组件名必须首字母大写

2. 虚拟DOM元素只能有一个根元素

3. 虚拟DOM元素必须有结束标签

更多Java –大数据 – 前端 – UI/UE - Android - 人工智能资料下载，可访问百度：尚硅谷官网(www.atguigu.com)

2.1.4. 渲染类组件标签的基本流程

1. React内部会创建组件实例对象

2. 调用render()得到虚拟DOM, 并解析为真实DOM

3. 插入到指定的页面元素内部

2.2. 组件三大核心属性1: state

2.2.1. 效果

需求: 定义一个展示天气信息的组件

1. 默认展示天气炎热 或 凉爽

2. 点击文字切换天气

2.2.2. 理解

1. state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)

2. 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)_前端培训

2.2.3. 强烈注意

1. 组件中render方法中的this为组件实例对象

2. 组件自定义的方法中this为undefined，如何解决？

a) 强制绑定this: 通过函数对象的bind()

b) 箭头函数

3. 状态数据，不能直接修改或更新

2.3. 组件三大核心属性2: props

2.3.1. 效果

需求: 自定义用来显示一个人员信息的组件

1. 姓名必须指定，且为字符串类型；

2. 性别为字符串类型，如果性别没有指定，默认为男

3. 年龄为字符串类型，且为数字类型，默认值为18

​编辑

 

2.3.2. 理解

1. 每个组件对象都会有props(properties的简写)属性

2. 组件标签的所有属性都保存在props中

2.3.3. 作用

1. 通过标签属性从组件外向组件内传递变化的数据

2. 注意: 组件内部不要修改props数据

2.3.4. 编码操作

1. 内部读取某个属性值

this.props.name

2. 对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = {

name: React.PropTypes.string.isRequired,

age: React.PropTypes.number

}

更多Java –大数据 – 前端 – UI/UE - Android - 人工智能资料下载，可访问百度：尚硅谷官网(www.atguigu.com)

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {

name: PropTypes.string.isRequired,

age: PropTypes.number.

}

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

<Person {...person}/>

4. 默认属性值：

Person.defaultProps = {

age: 18,

sex:'男'

}

5.组件类的构造函数

constructor(props){

super(props)

console.log(props)//打印所有属性

}

2.4. 组件三大核心属性3: refs与事件处理

2.4.1. 效果

需求: 自定义组件, 功能说明如下:

1. 点击按钮, 提示第一个输入框中的值

2. 当第2个输入框失去焦点时, 提示这个输入框中的值_web前端培训

2.4.2. 理解

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

2.4.3. 编码

1. 字符串形式的ref

<input ref="input1"/>

2. 回调形式的ref

<input ref={(c)=>{this.input1 = c}}

3. createRef创建ref容器·

myRef = React.createRef() 

<input ref={this.myRef}/>

2.4.4. 事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)

1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件

2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

2. 通过event.target得到发生事件的DOM元素对象

2.5. 收集表单数据

2.5.1. 效果

需求: 定义一个包含表单的组件

输入用户名密码后, 点击登录提示输入信息

2.5.2. 理解

包含表单的组件分类

1. 受控组件

2. 非受控组件

2.6. 组件的生命周期

2.6.1. 效果

需求:定义组件实现以下功能：

1. 让指定的文本做显示 / 隐藏的渐变动画

2. 从完全可见，到彻底消失，耗时2S

3. 点击“不活了”按钮从界面中卸载组件

2.6.2. 理解

1. 组件从创建到死亡它会经历一些特定的阶段。

2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。

3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

2.6.3. 生命周期流程图(旧)

​编辑

 

生命周期的三个阶段（旧）

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

1. constructor()

2. componentWillMount()

3. render()

4. componentDidMount()

更多Java –大数据 – 前端 – UI/UE - Android - 人工智能资料下载，可访问百度：尚硅谷官网(www.atguigu.com)

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. shouldComponentUpdate()

2. componentWillUpdate()

3. render()

4. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount()

2.6.4. 生命周期流程图(新)

​编辑

 

生命周期的三个阶段（新）

1. 初始化阶段: 由ReactDOM.render()触发---初次渲染

2. constructor()

3. getDerivedStateFromProps

4. render()

5. componentDidMount()

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

1. getDerivedStateFromProps

2. shouldComponentUpdate()

3. render()

4. getSnapshotBeforeUpdate

5. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

1. componentWillUnmount()

2.6.5. 重要的勾子

1. render：初始化渲染或更新渲染调用

2. componentDidMount：开启监听, 发送ajax请求

3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

2.6.6. 即将废弃的勾子

1. componentWillMount

2. componentWillReceiveProps

3. componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

2.7. 虚拟DOM与DOM Diffing算法

2.7.1. 效果

需求：验证虚拟DOM Diffing算法的存在

2.7.2. 基本原理图

​编辑