07react基础-render-props和高阶组件

2021-09-06 本文已影响0人东邪_黄药师

render props 模式

思路：将要复用的state和操作state的方法封装到一个组件中
问题1：如何拿到该组件中复用的state？
在使用组件时，添加一个值为函数的prop，通过函数参数来获取（需要组件内部实现）

<Mouse render={(mouse) => {}}/>

问题2：如何渲染任意的UI？
使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）

<Mouse render={(mouse) => (
<p>鼠标当前位置 {mouse.x}，{mouse.y}</p>
)}/>

具体的使用步骤

创建Mouse组件，在组件中提供复用的状态逻辑代码（1. 状态 2. 操作状态的方法）
将要复用的状态作为 props.render(state) 方法的参数，暴露到组件外部
使用 props.render() 的返回值作为要渲染的内容

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  render props 模式
*/

// 创建Mouse组件
class Mouse extends React.Component {
  // 鼠标位置state
  state = {
    x: 0,
    y: 0
  }

  // 鼠标移动事件的事件处理程序
  handleMouseMove = e => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }

  // 监听鼠标移动事件
  componentDidMount() {
    window.addEventListener('mousemove', this.handleMouseMove)
  }

  render() {
    // return null
    return this.props.render(this.state)
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>render props 模式</h1>
        <Mouse
          render={mouse => {
            return (
              <p>
                鼠标位置：{mouse.x} {mouse.y}
              </p>
            )
          }}
        />
      </div>
    )
  }
}

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

children代替render属性

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

<Mouse>
{({x, y}) => <p>鼠标的位置是 {x}，{y}</p> }
</Mouse>
// 组件内部：
this.props.children(this.state)

优化代码

1. 推荐：给 render props 模式添加 props校验

Mouse.propTypes = {
chidlren: PropTypes.func.isRequired
}

1. 应该在组件卸载时解除 mousemove 事件绑定

componentWillUnmount() {
window.removeEventListener('mousemove', this.handleMouseMove)
}

具体优化代码：

import React from 'react'
import ReactDOM from 'react-dom'

/* 
  render props 模式
*/
import PropTypes from 'prop-types'
// 导入图片资源
import img from './images/cat.png'

// 作用：鼠标位置复用
class Mouse extends React.Component {
  // 鼠标位置state
  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 this.props.children(this.state)
  }
}

// 添加props校验
Mouse.propTypes = {
  children: PropTypes.func.isRequired
}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>render props 模式</h1>
        <Mouse>
          {mouse => {
            return (
              <p>
                鼠标位置：{mouse.x} {mouse.y}
              </p>
            )
          }}
        </Mouse>

        <Mouse>
          {mouse => (
            <img
              src={img}
              alt="猫"
              style={{
                position: 'absolute',
                top: mouse.y - 64,
                left: mouse.x - 64
              }}
            />
          )}
        </Mouse>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

高阶组件

目的：实现状态逻辑复用

思路分析
1.高阶组件(HOC、Higher-Order Component) 是一个函数，接收要包装的组件，返回增强后的组件

const EnhancedComponent = withHOC(WrappedComponent)

2.高阶组件内部创建了一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent

// 高阶组件内部创建的类组件：
class Mouse extends React.Component {
render() {
return <WrappedComponent {...this.state} />
   }
}

使用步骤
1创建一个函数，名称约定以with开头
2指定函数参数，参数应该以大写字母开头

function withMouse(WrappedComponent) {}

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

function withMouse(WrappedComponent) {
class Mouse extends React.Component {}
return Mouse
}

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

// Mouse组件的render方法中：
return <WrappedComponent {...this.state} />

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

// 创建组件
const MousePosition = withMouse(Position)
// 渲染组件
<MousePosition />

完整步骤：

import React from 'react'
import ReactDOM from 'react-dom'

/* 
高阶组件
*/

import img from './images/cat.png'

// 创建高阶组件
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} />
  }
}

return Mouse
}

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

// 猫捉老鼠的组件：
const Cat = props => (
<img
  src={img}
  alt=""
  style={{
    position: 'absolute',
    top: props.y - 64,
    left: props.x - 64
  }}
/>
)

// 获取增强后的组件：
const MousePosition = withMouse(Position)

// 调用高阶组件来增强猫捉老鼠的组件：
const MouseCat = withMouse(Cat)

class App extends React.Component {
render() {
  return (
    <div>
      <h1>高阶组件</h1>
      {/* 渲染增强后的组件 */}
      <MousePosition />
      <MouseCat />
    </div>
  )
}
}

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

设置 displayName

使用高阶组件存在的问题：得到两个组件的名称相同
原因：默认情况下，React使用组件名称作为displayName
解决方式：为高阶组件设置displayName，便于调试时区分不同的组件
displayName的作用：用于设置调试信息(React Developer Tools信息)

Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

传递props
问题：如果没有传递props，会导致props丢失问题
解决方式：渲染WrappedComponent时，将state和props一起传递给组件
传递方式：

<WrappedComponent {...this.state} {...this.props} />