实现组件状态逻辑复用——render-props模式与高阶组件

一、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} />