目录
React组件复用概述
- 如果两个组件中的部分功能相似或相同 , 该如何处理?
- 处理方式: 复用相似的功能( 联想函数封装 )
- 复用什么:1. state 2. 操作state的方法 ( 组件状态逻辑 )
- 两种方式:1. render props 模式 2. 高阶组件 ( HOC )
- 注意: 这两种方式不是新的API , 而是利用React自身特点的编码技巧 , 演化而成的固定模式 (写法 )
render props 模式
思路分析
- 思路: 将要复用的state和操作state的方法封装到一个组件中
- 问题1: 如何拿到该组件中复用的state ?
- 在使用组件时 , 添加一个值为函数的prop , 通过 函数参数 来获取 ( 需要组件内部实现 )
- 问题2: 如何渲染任意的UI
- 使用该函数的返回值作为要渲染的UI内容 ( 需要组件内部实现 )
<Mouse render={ (mouse) => {} />
<Mouse render={ (mouse) => (
<p>鼠标当前位置 { mouse.x } , { mouse.y } </p>
) />
使用步骤
- 创建Mouse组件 , 在组件中提供复用的状态逻辑代码 ( 1. 状态 2. 操作状态的方法 )
- 将要复用的状态作为 props.render( state ) 方法的参数 , 暴露到组件外部
- 使用 props.render() 的返回值作为要渲染的内容
class Mouse extends React.Component {
state = {
x: 0,
y: 0,
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clienty
})
}
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
render() {
return null
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>render props 模式</h1>
<Mouse />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
class Mouse extends React.Component {
//...省略其他代码
render() {
return this.props.render(this.state)
}
}
class App extends React.Component {
render() {
return (
<div>
<h1>render props 模式</h1>
<Mouse render={ (mouse) => <p> 鼠标当前位置 {mouse.x} , { mouse.y } </p> />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
- 注意:并不是该模式叫 render props 就必须使用名为render的prop 实际上可以使用任何名称的prop
- 把prop是一个函数 并且告诉组件要渲染什么内容的技术叫做: render props模式
- 推荐: 使用 children 代替 render 属性
代码优化:
1. 推荐: 给 render props 模式添加 props 校验
2. 应该在组件卸载时解除mousemove 事件绑定
Mouse.propTypes = {
children: PropTypes.func.inRequired
}
componentWillUmount() {
window.removeEventListener('mousemove' , this.handleMouseMove)
}
2. 高阶组件
概述:
- 目的: 实现状态逻辑复用
- 采用 包装 ( 装饰 ) 模式 , 比如说: 手机壳
- 手机: 获取保护功能
- 手机壳: 提供保护功能
- 高阶组件就相当于手机壳 , 通过包装组件 , 增强组件功能
思路分析
- 高阶组件是一个函数 , 接收要包装的组件 , 返回增强后组件
- 高阶组件内部创建一个类组件 , 在这个类组件中提供复用的状态逻辑代码 , 通过prop将复用的状态传递给被包装组件WrappedComponent
const EnhancedComponent = withHOC(WrappedComponent)
// withHOC 高阶组件
// WrappedComponent 要包装的组件
// 高阶组件内部创建的类组件:
class mouse extends React.Component {
render() {
return <WrappedComponent {...this.state} />
}
}
使用步骤
- 创建一个函数 , 名称约定以with开头
- 指定函数参数 , 参数应该以大写字母开头 ( 作为要渲染的组件 )
- 在函数内部创建一个类组件 , 提供复用的状态逻辑代码 , 并返回
- 在该组件中 , 渲染参数组件 , 同事将状态通过prop传递给参数组件
- 调用高阶组件 , 传入要增强的组件 , 通过返回值拿到增强后的组件 , 并将其渲染到页面中
// 创建一个函数 , 名称约定以with开头
function withMouse(){}
//指定函数参数 , 参数应该以大写字母开头 ( 作为要渲染的组件 )
function withMouse( WrappedComponent) {}
//在函数内部创建一个类组件 , 提供复用的状态逻辑代码 , 并返回
function WithMouse(WarppedComponent) {
class Mouse extends React.Component {}
return Mouse
}
// 创建高阶组件
function withMouse(WrappedComponent) {
// 该组件提供复用的状态逻辑
class Mouse extends React.Component {
// 鼠标状态
state = {
x: 0,
y: 0
}
handleMouseMove = e => {
this.setState({
x: e.clientX,
y: e.clientY,
})
}
//控制鼠标状态逻辑
componentDidMount() {
window.addEventListener('mousemove', this.handleMouseMove)
}
//解绑事件
componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}
render() {
return <WrappedComponent {...this.state}></WrappedComponent>
}
}
return Mouse
}
//用来测试高阶组件
const Position = props => (
<p>
鼠标当前位置:(x:{props.x},y:{props.y})
</p>
)
const MousePositon = withMouse(Position)
class App extends React.Component {
render() {
return (
<div>
<h1>高级组件</h1>
{/* {渲染组件} */}
<MousePositon />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
设置displayName
- 使用高阶组件存在的问题 , 得到的两个组件名称相同
- 原因: 默认情况下 , React使用组件名称 作为displayName
- 解决方式: 为高阶组件设置 displayName 便于调试时区分不同的组件
- displayName的作用: 用于设置调试信息 ( React Developer Tools信息 )
传递 props
- 问题: props 丢失
- 原因: 高阶组件没有往下传递props
- 解决方法: 渲染 WrappedComponent时 , 将 stae 和 this.props 一起传递给组件
- 传递方式:
<WrappedComponent {...this.state } {...this.props }/>