React组件进阶--render-props,render props模式的使用步骤,children代替render属性,传递props

1.render-props

1.React组件复用概述

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

2.render props 模式

  1. 思路:将要复用的state和操作state的方法封装到一个组件中
  2. 问题1:如何拿到该组件中复用的state?
  3. 在使用组件时,添加一个值为函数的prop,通过 函数参数 来获取(需要组件内部实现)
     {}}/>
    
  4. 问题2:如何渲染任意的UI?
  5. 使用该函数的返回值作为要渲染的UI内容(需要组件内部实现)
     (
      

    鼠标当前位置 {mouse.x},{mouse.y}

    )}/>

3.render props模式的使用步骤

  1. 创建Mouse组件,在组件中提供复用的状态逻辑代码(1. 状态 2. 操作状态的方法)

    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(){
        //这一步先写null,后面会完善
        return null
      }
    }
    
  2. 将要复用的状态作为 props.render(state) 方法的参数,暴露到组件外部

    render() {
        return this.props.render(this.state)
      }
      
     {return ()}} />
    
  3. 使用 props.render() 的返回值作为要渲染的内容

     render={(mouse) => {
                return (
                  

    鼠标位置:{mouse.x},{mouse.y}

    )

    只实现了状态结构的复用,并没有实现UI结构的复用

  4. 在鼠标上加上图片,跟随鼠标一起移动

  5. 导入图片资源

    import img from './images/star.png'
    
  6. 将图片写下以下内容

    {/* 图片 */}
     {
              return star
    }}>
    

4.children代替render属性

  1. 注意:并不是该模式叫 render props 就必须使用名为render的prop,实际上可以使用任意名称的prop
  2. 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做:render props模式
  3. 推荐:使用 children 代替 render 属性
//组件内部
render() {
    return this.props.children(this.state)
}
  

     {mouse => {
           return (
              

鼠标位置:{mouse.x},{mouse.y}

) }}
{mouse => (star) }

 Context 中的用法:


{data => data参数表示接收到的数据 -- {data}}

代码优化

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

    import propTypes from 'prop-types'
    
    // 添加props校验
    Mouse.propTypes = {
      children:propTypes.func.isRequired
    }
    
  2. 应该在组件卸载时解除 mousemove 事件绑定

    因为componentDidMount是我们自己手动开的,既然开了一个,卸载时,就要关这一个

     // 推荐:在组件卸载时移除事件绑定
      componentWillUnmount(){
        window.addEventListener('mousemove',this.handleMouseMove)
      }
    

2.高阶组件

1.概述

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

2.思路分析

  1. 高阶组件(HOC,Higher-Order Component)是一个函数,接收要包装的组件,返回增强后的组件
  2. 高阶组件内部创建一个类组件,在这个类组件中提供复用的状态逻辑代码,
    class Mouse extends React.Component {
     render() {
    return 
     } 
    }
    
  3. 通过prop将复用的状态传递给被包装组件 WrappedComponent
    const EnhancedComponent = withHOC(WrappedComponent)
    

3.高阶组件使用步骤

  1. 创建一个函数,名称约定以 with 开头

    function withMouse() {}
    
  2. 指定函数参数,参数应该以大写字母开头(作为要渲染的组件)

    function withMouse(WrappedComponent) {}
    
  3. 在函数内部创建一个类组件,提供复用的状态逻辑代码,并返回

    function withMouse(WrappedComponent) {
    class Mouse extends React.Component {。。。}
      return Mouse
    }
    
  4. 在该组件中,渲染参数组件,同时将状态通过prop传递给参数组件

    UI组件由WrappedComponent提供

    // Mouse组件的render方法中:
                    //Mouse组件的状态->...this.state
    return 
    
  5. 调用该高阶组件,传入要增强的组件,通过返回值拿到增强后的组件,并将其渲染到页面中

                  //Positon组件作为参数传进来
    // 创建组件
    const MousePosition = withMouse(Position)
    // 渲染组件
    
    
  6. 导入图片

    import img from './images/star.png'
    
  7. 图片的组件

    const Star = props =>(
      
    )
    
  8. 让图片跟随鼠标移动

    //调用高阶组件来增强图片的组件
    const MouseStar = withMouse(Star)
    
     {/* 渲染增强后的组件 */}
      
    
  9. 完整代码

    // 创建高阶组件
    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.addEventListener('mousemove', this.handleMouseMove)
        }
        render() {
          return 
        }
      }
      return Mouse
    }
    
    // 用来测试高阶组件
    const Position = props => (
      

    鼠标当前位置:(x:{props.x},y:{props.y})

    ) // 获取增强后的组件 const MousePosition = withMouse(Position) class App extends React.Component { render() { return (

    高阶组件

    {/* 渲染增强后的组件 */}
    ) } }

4.设置displayName

  • 使用高阶组件存在的问题:得到的两个组件名称相同
  • 原因:默认情况下,React使用组件名称作为 displayName
  • 解决方式:为 高阶组件 设置 displayName 便于调试时区分不同的组件
  • displayName的作用:用于设置调试信息(React Developer Tools信息)
  • 设置方式:
//放在创建高阶组件内部
Mouse.displayName = `WithMouse${getDisplayName(WrappedComponent)}`

 设置 getDisplayName()
function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}

由上图变成下图:

React组件进阶--render-props,render props模式的使用步骤,children代替render属性,传递props_第1张图片

5.传递props

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

总结

  1. 组件通讯是构建 React 应用必不可少的一环。
  2. props 的灵活性让组件更加强大。
  3. 状态提升是React组件的常用模式。
  4. 组件生命周期有助于理解组件的运行过程。
  5. 钩子函数让开发者可以在特定的时机执行某些功能。
  6. render props模式和高阶组件都可以实现组件状态逻辑复用。
  7. 组件极简模型: (state, props) => UI

你可能感兴趣的:(React学习,react.js,javascript,前端,ecmascript,前端框架)