React组件复用

目录

React组件复用概述

render props 模式

使用步骤

2. 高阶组件

思路分析

使用步骤

设置displayName

传递 props


React组件复用概述

  • 如果两个组件中的部分功能相似或相同 , 该如何处理?
  • 处理方式: 复用相似的功能( 联想函数封装 )
  • 复用什么:1. state 2. 操作state的方法 ( 组件状态逻辑 )
  • 两种方式:1. render props 模式 2. 高阶组件 ( HOC )
  • 注意: 这两种方式不是新的API , 而是利用React自身特点的编码技巧 , 演化而成的固定模式 (写法 )

render props 模式

思路分析

  • 思路: 将要复用的state和操作state的方法封装到一个组件中
  • 问题1: 如何拿到该组件中复用的state ?
  • 在使用组件时 , 添加一个值为函数的prop , 通过 函数参数 来获取 ( 需要组件内部实现 )
  • 问题2: 如何渲染任意的UI
  • 使用该函数的返回值作为要渲染的UI内容 ( 需要组件内部实现 )
<Mouse render={ (mouse) => {} />
<Mouse render={ (mouse) => (
  <p>鼠标当前位置 { mouse.x } , { mouse.y } </p>
) />

使用步骤

  1. 创建Mouse组件 , 在组件中提供复用的状态逻辑代码 ( 1. 状态 2. 操作状态的方法 )
  2. 将要复用的状态作为 props.render( state ) 方法的参数 , 暴露到组件外部
  3. 使用 props.render() 的返回值作为要渲染的内容
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)
  }
  render() {
    return null
  }

}

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>render props 模式</h1>
        <Mouse />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))
class Mouse extends React.Component {
//...省略其他代码
  render() {
    return this.props.render(this.state)
  }

}

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

ReactDOM.render(<App />, document.getElementById('root'))
  • 注意:并不是该模式叫 render props 就必须使用名为render的prop 实际上可以使用任何名称的prop
  • 把prop是一个函数 并且告诉组件要渲染什么内容的技术叫做: render props模式
  • 推荐: 使用 children 代替 render 属性

代码优化:

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

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

Mouse.propTypes = {
  children: PropTypes.func.inRequired
}
componentWillUmount() {
  window.removeEventListener('mousemove' , this.handleMouseMove)
}

2. 高阶组件

概述:

  • 目的: 实现状态逻辑复用
  • 采用  包装 ( 装饰 ) 模式 , 比如说: 手机壳
  • 手机: 获取保护功能
  • 手机壳: 提供保护功能
  • 高阶组件就相当于手机壳 , 通过包装组件 , 增强组件功能

思路分析

  • 高阶组件一个函数 , 接收要包装的组件 , 返回增强后组件
  • 高阶组件内部创建一个类组件 , 在这个类组件中提供复用的状态逻辑代码  , 通过prop将复用的状态传递给被包装组件WrappedComponent
const EnhancedComponent = withHOC(WrappedComponent)
// withHOC 高阶组件
// WrappedComponent 要包装的组件
// 高阶组件内部创建的类组件:
class mouse extends React.Component {
  render() {
    return <WrappedComponent {...this.state} />
  }
}

使用步骤

  1. 创建一个函数 , 名称约定以with开头
  2. 指定函数参数 , 参数应该以大写字母开头 ( 作为要渲染的组件 )
  3. 在函数内部创建一个类组件 , 提供复用的状态逻辑代码 , 并返回
  4. 在该组件中 , 渲染参数组件 , 同事将状态通过prop传递给参数组件 
  5. 调用高阶组件 , 传入要增强的组件 , 通过返回值拿到增强后的组件 , 并将其渲染到页面中  
// 创建一个函数 , 名称约定以with开头
function withMouse(){}
//指定函数参数 , 参数应该以大写字母开头 ( 作为要渲染的组件 )
function withMouse( WrappedComponent) {}
//在函数内部创建一个类组件 , 提供复用的状态逻辑代码 , 并返回
function WithMouse(WarppedComponent) {
  class Mouse extends React.Component {}
  return Mouse
}
// 创建高阶组件
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}></WrappedComponent>
    }
  }
  return Mouse
}

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

const MousePositon = withMouse(Position)
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>高级组件</h1>
        {/* {渲染组件} */}
        <MousePositon />
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('root'))

设置displayName

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

传递 props

  • 问题: props 丢失
  • 原因: 高阶组件没有往下传递props
  • 解决方法: 渲染 WrappedComponent时 , 将 stae 和 this.props 一起传递给组件
  • 传递方式: 
    <WrappedComponent {...this.state } {...this.props }/> 

     

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值