React–》React组件的复用以及高阶组件的使用讲解

React组件复用

在日常开发中，如果两个组件中的部分功能相似或相同，该如何处理呢？正常的处理方式是复用其相似的功能，即 state 和 操作state的方法，我们在处理组件复用时，可以有两种方式选择，这两种方式不是新的APl，而是利用React自身特点的编码技巧，演化而成的固定模式(写法)，如下：

render props模式

创建要复用的组件，在组件中提供要复用的状态逻辑代码(状态或操作状态的方法)：

import { Component } from 'react';
class Mouse extends Component {
  // 初始化状态
  state = {
    x:0,
    y:0
  }
  // 操作状态的方法
  handlemousemove = (e) =>{ 
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
  componentDidMount(){
    window.addEventListener('mousemove',this.handlemousemove)
  }
  render() {
    // 将state作为参数暴露出去(这里的render可以是任意值，不要和其它render函数搞混了)
    return this.props.render(this.state)
  }
}
export default Mouse

当然如果要是考虑浏览器效率问题的话，推荐可以在组件卸载时去移除监听事件：

传入的render的props使用复用的状态来渲染UI结构：

import React from "react";
import ReactDOM from "react-dom";
import Mouse from './App'
// 导入图片资源
import img from './1.png'

class App extends React.Component {
  render(){
    return (
      <div>
        <Mouse render={(mouse) => {
          return (
            <p>
              鼠标位置：{mouse.x} {mouse.y}
            </p>
          )
        }}/>
        <Mouse render={(mouse) => {
          return (
            <p>
              鼠标位置：{mouse.x} {mouse.y}
            </p>
          )
        }}/>
        <Mouse render={(mouse) => {
          return <img src={img} alt="logo" style={{
            position:'absolute',
            top:mouse.y,
            left:mouse.x
          }}/>
        }}/>
      </div>
    )
  }
}

ReactDOM.render(<App />,document.getElementById('root'))

注意：并不是该模式叫render props就必须使用名为render的prop，实际上可以使用任意名称的prop，把prop是一个函数并且告诉组件要渲染什么内容的技术叫做:render props模式。

当然使用 children 也能代替 render 属性。

<Mouse>
  {
    (mouse) => {
      return (
        <p>
          鼠标位置：{mouse.x} {mouse.y}
        </p>
      )
    }
  }
</Mouse>
<Mouse>
  {
    (mouse) => {
      return <img src={img} 
            alt="logo" 
            style={{
            position:'absolute',
            top:mouse.y,
            left:mouse.x
            }}
      />
    }
  }
</Mouse>

如果想考虑代码的优化的话，可以给children加一个props校验：

高阶组件(HOC)

高阶组件(HOC , Higher-Order Component )是一个函数，接收要包装的组件，返回增强后的组件。高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent。其使用步骤如下：

创建一个函数，名称约定以with开头。指定函数参数，参数应该以大写字母开头(作为要渲染的组件)。

在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回。

在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件。

调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中。

完整代码：

import React,{ Component } from 'react';
import ReactDOM from "react-dom";
import img from './1.png'
// 创建高阶组件
function WithMouse(WrappeaComponent){
  // 该组件提供复用的状态逻辑
  class Mouse extends 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 <WrappeaComponent {...this.state}></WrappeaComponent>
    }
  }
  return Mouse
}

// 用来测试高阶组件
const Position = props =>{
  return <p>
    鼠标当前位置：(x: {props.x},y: {props.y})
  </p>
}

// 图片跟随鼠标的功能
const Img = props =>{
  return <img
    src={img}
    alt=''
    style={{
      position:'absolute',
      top:props.y - 88,
      left:props.x - 88,
    }}
  />
}

// 获取增强后的组件
const MousePosition = WithMouse(Position)
// 调用高阶组件来增强图片组件
const MouseImg = WithMouse(Img)

class App extends Component {
  render(){
    return (
      <div>
        <h1>高阶组件</h1>
        <MousePosition></MousePosition>
        <MouseImg></MouseImg>
      </div>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'))

使用高阶组件存在一个问题，就是复用的高级组件逻辑代码的组件名称是相同的，因为默认情况下React使用组件名称作为displayName。而displayName的作用是用于开发者工具调试信息。

为了处理这个问题，可以为高阶组件设置 displayName ，便于调试时区分不同的组件：

// 设置displayName
Mouse.displayName = `WithMouse${getDisplayMame(WrappeaComponent)}`

function getDisplayMame(WrappeaComponent){
  return WrappeaComponent.displayname || WrappeaComponent.name || 'Component'
}