render-props模式
将可以复用的state和操作state的方法封装到一个独立的组件中,可以提高开发效率
props.render()模式
demo: 定义一个获取鼠标位置的组件
创建Mouse组件,在组件中提供复用的代码逻辑
-
将状态作为
props.render(state)方法的参数,暴露到组件外部注意: 不一定要叫
render也可以使用其他名称,复用时与之一致即可
import { Component } from 'react'
export default class Mouse extends 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模式
// show是自定义的名称,复用时与之对应即可
return this.props.show(this.state)
}
}
定义一个Position类式组件
import React, { Component } from 'react'
export default class Position extends Component {
render() {
return (
<div>
<h2>鼠标当前x坐标轴: {this.props.x}</h2>
<h2>鼠标当前y坐标轴: {this.props.y}</h2>
</div>
)
}
}
将Mouse组件和Position组件引入到App组件中
将Mouse组件暴露的方法作为Mouse标签属性,绑定一个回调函数,回调函数的形参就是暴露出来的数据
将数据传入需要复用的组件内部
import React, { Component } from 'react'
import Mouse from './Mouse'
import Position from './components/Position'
export default class App extends Component {
render() {
return (
<div>
{/* render 模式 复用 类式组件 */}
<Mouse show={(mouse) => <Position {...mouse}></Position>}>
</Mouse>
</div>
)
}
}
定义一个Picture函数式组件,实现鼠标跟随效果
import React from 'react'
import pic from '../static/1.gif'
export default function Picture(props) {
return (
<div>
<img
src={pic}
alt=""
style={{ position: 'absolute', left: props.x - 100 + 'px', top: props.y - 50 + 'px', width: '200px', height: '200px' }}
/>
</div>
)
}
在App组件中引入Picture组件
函数式组件在使用的时候,不需要以标签的形式渲染,而是使用函数的形式,
数据直接通过函数的参数传入组件内部
import React, { Component } from 'react'
import Mouse from './Mouse'
import Position from './components/Position'
import Picture from './components/Picture'
export default class App extends Component {
render() {
return (
<div>
{/* render 模式 复用 类式组件 */}
<Mouse show={(mouse) => <Position {...mouse}></Position>}>
</Mouse>
{/* render 模式 复用 函数式组件 */}
<Mouse show={mouse => Picture(mouse)}></Mouse>
</div>
)
}
}
使用children代替render
使用props.children()暴露状态,在复用组件的时候,可以将组件当成子组件使用
推荐使用children代替render
demo:修改Mouse组件暴露状态的方式
import { Component } from 'react'
export default class Mouse extends 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() {
// 向外界提供当前子组件里面的数据 children模式
return this.props.children(this.state)
}
}
将定义的类式组件和函数式组件引入到App组件
import React, { Component } from 'react'
import Mouse from './Mouse'
import Position from './components/Position'
import Picture from './components/Picture'
export default class App extends Component {
render() {
return (
<div>
{/* children 模式 复用 类式组件 */}
<Mouse>
{
mouse => <Position {...mouse}></Position>
}
</Mouse>
{/* children 模式 复用 函数式组件 */}
<Mouse>
{
mouse => Picture(mouse)
}
</Mouse>
</div>
)
}
}
高阶组件
采用包装模式来实现状态的复用,通过包装组件,来增强组件的功能
使用步骤
- 在可复用组件内创建一个函数,函数名以
with开头 - 指定函数的参数,参数名称以大写字母开头(调用函数时传入的是组件名称)
- 在函数创建一个类式组件,提供复用状态的逻辑代码,并返回
- 在组件的
render()方法里返回以函数参数为名称的标签,并将状态传入组件 - 引入高阶组件,传入需要增强的组件,并暴露出来
demo
定义一个高阶组件
import { Component } from 'react'
// 定义一个函数,在函数内部创建一个类式组件
// 传递的参数是一个组件,所以形参的首字母需要大写
const withMouse = WarppedComponent => {
class Mouse extends 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() {
// 返回传递过来的组件，把当前组件的状态设置进去
return <WarppedComponent {...this.state} />
}
}
return Mouse
}
export default withMouse
在组件内使用高阶组件
引入高阶组件,将需要增强的组件传入高阶组件
import React, { Component } from 'react'
import withMouse from '../withMouse'
class Position extends Component {
render() {
return (
<div>
<h2>鼠标当前x坐标轴: {this.props.x}</h2>
<h2>鼠标当前y坐标轴: {this.props.y}</h2>
</div>
)
}
}
export default withMouse(Position)
在App组件内使用的方法和一般情况一致
import React, { Component } from 'react'
import Position from './components/Position'
import Picture from './components/Picture'
export default class App extends Component {
render() {
return (
<div>
<Position />
<Picture />
</div>
)
}
}
使用displayName
使用了高阶组件之后会存在一个问题: 开发者工具会显示两个组件名称一样的组件
因为默认情况下, React会使用组件名称作为组件名称,所有在两个组件都使用了高阶组件的情况下,两个组件的外壳都是其高阶组件的名称
解决方案: 手动设置displayName
使用步骤
-
在高阶组件的函数内部定义一个函数
getDisplayName(){}把传入组件作为参数传入这个函数
效果图: 使用前import { Component } from 'react' // 定义一个函数,在函数内部创建一个类式组件 const withMouse = WarppedComponent => { class Mouse extends Component { // 复用的逻辑代码 } // 设置开发者工具显示名称,如果不设置开发者工具显示的外壳组件都是一样的 function getDisplayName(WarppedComponent) { return WarppedComponent.displayName || WarppedComponent.name || 'Component' } // 给组件添加displayName属性 Mouse.displayName = `WithMouse${getDisplayName(WarppedComponent)}` return Mouse } export default withMouse1.png
使用后2.png
