React的render-props模式、高阶组件

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 withMouse

效果图: 使用前

1.png

使用后

2.png