文章目录
一、render-props模式
1.1 React组件复用概述
- 思考:如果两个组件中的部分功能相似或相同,该如何处理?
- 处理方式:复用相似的功能
- 复用什么?
state
- 操作
state
的方法
- 两种方式:
render props
模式- 高阶组件(HOC)
- 注意: 这两种方式不是新的API,而是利用React自身特点的编码技巧,演化而成的固定模式
1.2 思路分析
-
思路:将要复用的state和操作state的方法封装到一个组件中
-
如何拿到该组件中复用的state
- 在使用组件时,添加一个值为
函数的prop
,通过函数参数来获取
- 在使用组件时,添加一个值为
<App render={ (mouse)=> {} }/>
-
如何渲染到任意的UI
- 使用该函数的返回值作为要渲染的UI内容
<App render={ (mouse) => {
<p>鼠标当前位置{mouse.x},{mouse.y}</p>
} }/>
1.3 使用步骤
- 创建Mouse组件,在组件中提供复用的逻辑代码
- 将要复用的状态作为 props.render(state)方法的参数,暴露到组件外部
- 使用props.render() 的返回值作为要渲染的内容
示例
import React from 'react'
import ReactDOM from 'react-dom'
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
})
}
render() {
return this.props.render(this.state)
}
}
class App extends React.Component {
render() {
return (
<div>
<Mouse
render={mouse => {
return (
<p>
X:{mouse.x},Y:{mouse.y}
</p>
)
}}
/>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
1.4 children代替render属性
- 注意:并不是该模式叫 render props就必须使用名为render的prop,实际上可以使用任意名称的prop
- 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做: render props模式
- 推荐:使用
children
代替render
属性
<Mouse>
{ {x,y} => <p>鼠标的位置是{x},{y}</p> }
</Mouse>
// 组件内部
this.props.children(this.state)
1.5 代码优化
// 添加props校验
Mouse.propTypes = {
children: PropTypes.func.isRequired
}
//卸载组件时,清除事件
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
二、 高阶组件
2.1 概述
- 目的:实现
状态逻辑复用
- 采用
包装模式
- 手机:获取保护功能
- 手机壳:提供保护功能
- 高阶组件就相当于手机壳,通过包装组件,增强组件功能
2.2 思路分析
高阶组件
(HOC、Higher-Order Component)是一个函数
,接收要包装的组件,返回增强后的组件
const EnhancedComponent = withHOC(WrappedComponent)
- 高阶组件内部
创建了一个类组件
,在这个类组件中提供复用的状态逻辑代码
,通过prop将复用的状态传递给被包装组件WrappedComponent
// 在高阶组件内部创建的类组件
class Mouse extends React.Component {
render() {
return <WrappedComponent {...this.state} />
}
}
2.3 使用步骤
- 创建一个函数,名称约定以
with
开头 - 指定函数参数,参数应该以
大写字母
开头 - 在函数内部
创建一个类组件
,提供复用的状态逻辑代码,并返回 - 在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件
- 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面
import React from 'react'
import ReactDOM from 'react-dom'
// 创建函数
function withMouse(WrappedComponent) {
class Mouse extends React.Component {
// 鼠标的位置状态
state = {
x: 0,
y: 0
}
// 当挂载时监听鼠标移动事件
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
// 当组件移除时解绑事件
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY
})
}
render() {
// 在render函数里面返回传递过来的组件,把当前组件的状态设置进去
return <WrappedComponent {...this.state} />
}
}
return Mouse
}
function Position(props) {
return (
<p>
X:{props.x}
Y:{props.y}
</p>
)
}
// 把position 组件来进行包装
let MousePosition = withMouse(Position)
class App extends React.Component {
render() {
return (
<div>
高阶组件
// 渲染包装组件
<MousePosition />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
2.3 设置displayName
- 使用高阶组件存在的问题:得到两个组件的名称相同
- 原因:默认情况下,React使用组件名称作为
displayName
- 解决方式:为高阶组件设置
displayName
,便于调试时区分不同的组件 displayName的作用:用于设置调试信息(React Developer Tools信息)
- 设置方式:
Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
2.4 传递props
- 问题:如果没有传递props,会导致props丢失问题
- 解决方式: 渲染
WrappedComponent
时,将state
和props
一起传递给组件
<WrappedComponent {...this.state} {...this.props} />