第二章:React 面向组件编程

2.1. 基本理解和使用

2.1.1. 效果

image-20201114145701687

2.1.2. 自定义组件(Component) :

  1. 定义组件(2 种方式)
1
2
3
4
5
6
7
8
9
10
11
/* 方式 1:  工厂函数组件( 简单组件)*/
function MyComponent () {
return <h2>工厂函数组件(简单组件)</h2>
}
/* 方式 2: ES6 类组件( 复杂组件)*/
class MyComponent2 extends React.Component {
render () {
console.log(this) // MyComponent2 的实例对象
return <h2>ES6 类组件(复杂组件)</h2>
}
}
  1. 渲染组件标签
1
ReactDOM.render(<MyComponent />, document.getElementById('example1'))

2.1.3. 注意

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

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

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

2.1.4. render() 渲染组件标签的基本流程

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

  2. 得到包含的虚拟 DOM 并解析为真实 DOM

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

2.2. 组件三大属性 1: state

2.2.1. 效果

Like组件

2.2.2. 理解

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

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

2.2.3. 编码操作

  1. 初始化状态:
1
2
3
4
5
6
7
constructor (props) {
super(props)
this.state = {
stateProp1 : value1,
stateProp2 : value2
}
}
  1. 读取某个状态值
1
this.state.statePropertyName
  1. 更新状态---->组件界面更新
1
2
3
4
this.setState({
stateProp1 : value1,
stateProp2 : value2
})

2.3. 组件三大属性 2: props

2.3.1. 效果

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

1). 姓名必须指定

2). 如果性别没有指定 , 默认为男

3). 如果年龄没有指定 , 默认为 18

image-20201114150301097

2.3.2. 理解

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

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

2.3.3. 作用

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

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

2.3.4. 编码操作

  1. 内部读取某个属性值
1
this.props.propertyName
  1. 对 props 中的属性值进行类型限制和必要性限制
1
2
3
4
Person.propTypes = {
name: React.PropTypes.string.isRequired,
age: React.PropTypes.number.isRequired
}
  1. 扩展属性: 将对象的所有属性通过 props 传递
1
<Person {...person}/>
  1. 默认属性值
1
2
3
Person.defaultProps = {
name: 'Mary'
}
  1. 组件类的构造函数
1
2
3
4
constructor (props) {
super(props)
console.log(props) // 查看所有属性
}

2.3.5. 面试题

问题: 请区别一下组件的 props 和 state 属性

  1. state: 组件自身内部可变化的数据

  2. props: 从组件外部向组件内部传递数据, 组件内部只读不修改

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

2.4.1. 效果

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

  1. 点击按钮 , 提示第一个输入框中的值
  2. 当第 2 个输入框失去焦点时,提示这个输入框中的值

2.4.2. 组件的 3 大属性之二: refs 属性

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

a. <input type="text" ref={input => this.msgInput = input}/>

b. 回调函数在组件初始化渲染完或卸载时自动调用

  1. 在组件中可以通过 this.msgInput 来得到对应的真实 DOM 元素

  2. 作用: 通过 ref 获取组件内容特定标签对象, 进行读取其相关数据

2.4.3. 事件处理

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

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

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

  1. 通过 event.target 得到发生事件的 DOM 元素对象
1
2
3
4
<input onFocus={this.handleClick}/>
handleFocus(event) {
event.target // 返回 input 对象
}

2.4.4. 强烈注意

  1. 组件内置的方法中的 this 为组件对象

  2. 在组件类中自定义的方法中 this 为 null

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

b. 箭头函数(ES6 模块化编码时才能使用)

2.5. 组件的组合

2.5.1. 效果

功能: 组件化实现此功能

  1. 显示所有 todo 列表
  2. 输入文本, 点击按钮显示到列表的首位, 并清除输入的文本

component    组合使用

2.5.2. 功能界面的组件化编码流程( 无比重要)

  1. 拆分组件: 拆分界面,抽取组件

  2. 实现静态组件: 使用组件实现静态页面效果

  3. 实现动态组件

a. 动态显示初始化数据

b. 交互功能(从绑定事件监听开始)

2.6. 收集表单数据

2.6.1. 效果

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

  1. 输入用户名密码后, 点击登陆提示输入信息
  2. 不提交表单

2.6.2. 理解

  1. 问题: 在 react 应用中, 如何收集表单输入数据

  2. 包含表单的组件分类

a. 受控组件: 表单项输入数据能自动收集成状态

b. 非受控组件: 需要时才手动读取表单输入框中的数据

2.7. 组件生命周期

2.7.1. 效果

需求: 自定义组件

  1. 让指定的文本做显示/隐藏的渐变动画
  2. 切换持续时间为 2S
  3. 点击按钮从界面中移除组件界面

component    生命周期

2.7.2. 理解

render方法,一旦状态改变,就会重新调用

  1. 组件对象从创建到死亡它会经历特定的生命周期阶段

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

  3. 我们在定义组件时, 可以重写特定的生命周期回调函数, 做特定的工作

2.7.3. 生命周期流程图

image-20201114162648669

image-20201115142403135

2.7.4. 生命周期详述

  1. 组件的三个生命周期状态:
  • Mount:插入真实 DOM
  • Update:被重新渲染
  • Unmount:被移出真实 DOM
  1. React 为每个状态都提供了勾子(hook)函数
  • componentWillMount()
  • componentDidMount()
  • componentWillUpdate()
  • componentDidUpdate()
  • componentWillUnmount()
  1. 生命周期流程:

a. 第一次初始化渲染显示: ReactDOM.render()

  • constructor(): 创建对象初始化 state
  • componentWillMount() : 将要插入回调
  • render() : 用于插入虚拟 DOM 回调
  • componentDidMount() : 已经插入回调

b. 每次更新 state: this.setSate()

  • componentWillUpdate() : 将要更新回调
  • render() : 更新(重新渲染)
  • componentDidUpdate() : 已经更新回调

c. 移除组件: ReactDOM.unmountComponentAtNode(containerDom)

  • componentWillUnmount() : 组件将要被移除回调

2.7.5. 重要的勾子

  1. render(): 初始化渲染或更新渲染调用

  2. componentDidMount(): 开启监听, 发送 ajax 请求

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

  4. componentWillReceiveProps(): 后面需要时讲

2.8. 虚拟 DOM 与 与 DOM Diff 算法

2.8.1. 效果

component    虚拟DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
componentDidMount () {
setInterval(() => {
this.setState({
date: new Date()
})
}, 1000)
}
render () {
console.log('render()')
return (

<p>
Hello, <input type="text" placeholder="Your name here"/>!&nbsp;
It is {this.state.date.toTimeString()}
</p>

)
}
}
ReactDOM.render(
<HelloWorld/>,
document.getElementById('example')
)

2.8.2. 基本原理图

image-20201114185318484