1 组件的生命周期
1.1 组件的生命周期概述
- 意义：组件的生命周期有助于理解组件的运行方式、完成更复杂的组件功能、分析组件错误原因等
- 组件的生命周期：组件从被创建到挂载到页面中运行，再到组件不用时卸载的过程
- 生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数。
- 钩子函数的作用：为开发人员在不同阶段操作组件提供了时机。
- 只有 类组件 才有生命周期。
1.2 生命周期的三个阶段
- 每个阶段的执行时机
- 每个阶段钩子函数的执行顺序
- 每个阶段钩子函数的作用
创建时（挂载阶段）
- 执行时机：组件创建时（页面加载时）
- 执行顺序：
更新时（更新阶段） - 执行时机：1. setState() 2. forceUpdate() 3. 组件接收到新的props
- 说明：以上三者任意一种变化，组件就会重新渲染
- 执行顺序：
卸载时（卸载阶段） - 执行时机：组件从页面中消失
1.3 不常用钩子函数介绍
2 render-props和高阶组件
2.1 React组件复用概述
- 思考：如果两个组件中的部分功能相似或相同，该如何处理？
- 处理方式：复用相似的功能（联想函数封装）
- 复用什么？1. state 2. 操作state的方法 （组件状态逻辑 ）
- 两种方式：1. render props模式 2. 高阶组件（HOC）
- 注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）
2.2 render props 模式
思路分析
- 思路：将要复用的state和操作state的方法封装到一个组件中
- 问题1：如何拿到该组件中复用的state？
- 在使用组件时，添加一个值为函数的prop，通过 函数参数 来获取（需要组件内部实现）
- 问题2：如何渲染任意的UI？
- 使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）
<Mouse render={(mouse) => (
<p>鼠标当前位置 {mouse.x}，{mouse.y}</p>
)}/>
使用步骤
- 创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态 2. 操作状态的方法）
- 将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部
- 使用 props.render() 的返回值作为要渲染的内容
class Mouse extends React.Component {
// … 省略state和操作state的方法
render() {
return this.props.render(this.state)
}
}
<Mouse render={(mouse) => <p>鼠标当前位置 {mouse.x}，{mouse.y}</p>}/>
演示Mouse组件的复用
- Mouse组件负责：封装复用的状态逻辑代码（1. 状态 2. 操作状态的方法）
- 状态：鼠标坐标（x, y）
- 操作状态的方法：鼠标移动事件
- 传入的render prop负责：使用复用的状态来渲染UI结构
import React from 'react'
import ReactDOM from 'react-dom'
// 导入图片
import cat from './images/cat.png'
// 创建 Mouse 组件，用来复用 鼠标位置，实现状态逻辑复用
/* class Mouse extends React.Component {
// 鼠标位置状态
state = {
x: 0,
y: 0
}
// 进入页面时，就绑定事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 鼠标移动的事件处理程序
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 移除事件
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
return (
<div>
当前鼠标位置：{this.state.x} - {this.state.y}
</div>
)
}
} */
class Mouse extends React.Component {
// 鼠标位置状态
state = {
x: 0,
y: 0
}
// 进入页面时，就绑定事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 鼠标移动的事件处理程序
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 移除事件
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
// 验证通过 porps 可以获取到render属性
// console.log(this.props)
// 调用 props.render 方法
return this.props.render(this.state)
}
}
ReactDOM.render(
<Mouse
render={mouse => (
<img
src={cat}
alt=""
style={{ position: 'absolute', top: mouse.y - 64, left: mouse.x - 64 }}
/>
)}
/>,
document.getElementById('root')
)
// ReactDOM.render(
// <Mouse
// render={mouse => (
// <p>
// 当前鼠标位置：{mouse.x} - {mouse.y}
// </p>
// )}
// />,
// document.getElementById('root')
// )
1.3 高阶组件
思路分析
- 高阶组件（HOC，Higher-Order Component）是一个函数，接收要包装的组件，返回增强后的组件
- 高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件 WrappedComponent
const EnhancedComponent = withHOC(WrappedComponent)
// 高阶组件内部创建的类组件：
class Mouse extends {
render() {
return <WrappedComponent {...this.state} />
}
}
使用步骤
- 创建一个函数，名称约定以 with 开头
function withMouse() {}
- 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
function withMouse(WrappedComponent) {}
- 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
- 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
function withMouse(WrappedComponent) {
class Mouse extends React.Component {}
return Mouse
}
// Mouse组件的render方法中：
return <WrappedComponent {...this.state} />
- 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
// 创建组件
const MousePosition = withMouse(Position)
// 渲染组件
<MousePosition />
演示Mouse组件的复用：
import React from 'react'
import ReactDOM from 'react-dom'
import cat from './images/cat.png'
// 高阶组件是一个函数
// 作用：包装一个组件，返回增强后的组件
// 比如：const CatWithMouse = withMouse(Cat)
// 比如：const PositionWithMouse = withMouse(Position)
// 高阶组件的两个职责：1 提供复用的state 2 提供操作状态的方法
// 创建一个高阶组件
// WrappedComponent --> Cat
// 通过高阶组件的参数，来指定要渲染的内容
const withMouse = WrappedComponent => {
class Mouse extends React.Component {
// 鼠标位置状态
state = {
x: 0,
y: 0
}
// 进入页面时，就绑定事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 鼠标移动的事件处理程序
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 移除事件
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
// 将组件内部的状态，通过 props 传递给子组件
// WrappedComponent ---> Cat
return <WrappedComponent {...this.state} />
}
}
return Mouse
}
// 创建Cat组件
// 高阶组件是通过 props 来将复用的状态，传递给组件的，所以，在组件中直接通过 props
// 就可以获取到复用的状态逻辑了
// const Cat = props => {
// // console.log('Cat 组件中接收到高阶组件传递的状态：', props)
// return (
// <img
// src={cat}
// alt=""
// style={{ position: 'absolute', top: props.y - 64, left: props.x - 64 }}
// />
// )
// }
//
// const CatWithMouse = withMouse(Cat)
// ReactDOM.render(<CatWithMouse />, document.getElementById('root'))
const Positioin = props => (
<p>
当前鼠标位置：{props.x} - {props.y}
</p>
)
// 最终返回的增强后的组件，既有结构，又有状态逻辑了
const PositionWithMouse = withMouse(Positioin)
ReactDOM.render(<PositionWithMouse />, document.getElementById('root'))
设置displayName
- 使用高阶组件存在的问题：得到的两个组件名称相同
- 原因：默认情况下，React使用组件名称作为 displayName
- 解决方式：为 高阶组件 设置 displayName 便于调试时区分不同的组件
- displayName的作用：用于设置调试信息（React Developer Tools信息）
- 设置方式：
Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component' }
import React from 'react'
import ReactDOM from 'react-dom'
import cat from './images/cat.png'
// 高阶组件是一个函数
// 作用：包装一个组件，返回增强后的组件
// 比如：const CatWithMouse = withMouse(Cat)
// 比如：const PositionWithMouse = withMouse(Position)
// 高阶组件的两个职责：1 提供复用的state 2 提供操作状态的方法
// 创建一个高阶组件
// WrappedComponent --> Cat
// 通过高阶组件的参数，来指定要渲染的内容
const withMouse = WrappedComponent => {
class Mouse extends React.Component {
// 鼠标位置状态
state = {
x: 0,
y: 0
}
// 进入页面时，就绑定事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 鼠标移动的事件处理程序
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
// 移除事件
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
// 将组件内部的状态，通过 props 传递给子组件
// WrappedComponent ---> Cat
// {...this.state} 的作用：就是讲 state 中的属性分别传递给组件，相当于下面一行的写法
return <WrappedComponent {...this.state} />
// return <WrappedComponent x={this.state.x} y={this.state.y} />
}
}
// 设置 Mouse 组件再 react-dev-tools（浏览器开发者工具）中的展示名称：
Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
return Mouse
}
const Positioin = props => (
<p>
当前鼠标位置：{props.x} - {props.y}
</p>
)
// 最终返回的增强后的组件，既有结构，又有状态逻辑了
const PositionWithMouse = withMouse(Positioin)
const Cat = props => {
// console.log('Cat 组件中接收到高阶组件传递的状态：', props)
return (
<img
src={cat}
alt=""
style={{ position: 'absolute', top: props.y - 64, left: props.x - 64 }}
/>
)
}
const CatWithMouse = withMouse(Cat)
ReactDOM.render(
<div>
<PositionWithMouse />
<CatWithMouse />
</div>,
document.getElementById('root')
)
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
