react 高阶组件的 理解和应用

时间: 2018-05-16阅读: 2035标签: react

高阶组件是什么东西

简单的理解是:一个包装了另一个基础组件的组件。(相对高阶组件来说,我习惯把被包装的组件称为基础组件)注意:这里说的是包装,可以理解成包裹和组装;

具体的是高阶组件的两种形式吧:

a、属性代理(Props Proxy)

可以说是对组件的包裹,在包裹的过程中对被包裹的组件做了点什么(props的处理,把基础组件和其他元素组合),然后返回,这就成了一个高阶组件;

b、反向继承 (Inheritance Inversion)

可以理解成是组装,和属性代理不同的是,反向继承是继承自基础组件,所有很自然,它可以直接获取基础组件的props,操作基础组件的state。可以通过 反向继承的形式,配合compose将携带不同功能模块的高阶组件组装到基础组件上,加强基础组件。

本文栗子:https://github.com/wayaha/react-demos-HOC,compose栗子:https://github.com/wayaha/react-dom-compose,下边一个一个的说。


属性代理(Props Proxy)

我们可以先建一个基础组件,如下:

class BaseComponent extends Component {
  constructor (props) {
    super(props);
    this.state = {
      baseName: 'base component'
    };
  };

  render () {
    const { name} = this.props;
    const { baseName } = this.state;
    return <div>{`${name} + ${baseName}`}</div>
  };
};
为了便于说明问题,写一个很简答的基础组件,它的作用仅仅是返回一个div,显示他自己的名字;

a、对props的操作

这个高阶组件是一个相对简单的无状态组件,只是这个高阶组件返回了一个新的组件,而这个新的组件是对基础组件的一个包装。仅仅对基础组件的props进行了增加,当然也可以进行改变,删除和读取(具体的可以下载代码上手试试)。

注意:(1)、此时render方法内的this.props,它是InnerComponent组建的props,而BaseComponent组件实际也就是InnerComponent组件。

   (2)、高阶组件中的InnerComponent组件是一个完整的组件,可以根据需要添加一下state状态,作为props传到BaseComponent组件。可以将基础组件作为一个公共的组件,然后根据需要,使用的不同的高阶组件包装出具有不一样功能的组件。

import React, { Component } from 'react';

const PropsComponent = (BaseComponent) => {

  class InnerComponent extends Component {
    render () {
      const props = {
        ...this.props,
        name: 'HOC Component'
      };
      return <BaseComponent {...props} />
    };
  };

  return InnerComponent;
}
export default PropsComponent;


b、把基础组件和其他元素组合

出于操作样式、布局或其它的考虑,可以将 基础组件与其它组件包裹在一起。一些相对简单的用法也可以使用正常的父组件来实现,只是使用高阶组件可以获得更多的灵活性。也利于组件的抽象和复用。

const WrapperComponent = (BaseComponent) => {
    class InnerComponent extends Component {
        render () {
            const props = {
                ...this.props,
                name: 'HOC Component'
            };
            return <div style={{backgroundColor: 'orange'}}>
                    <BaseComponent {...props} />
                </div>
        };
    };
    return InnerComponent;
}


反向继承(Inheritance Inversion)

反向继承是继承自基础组件,并不是高阶组件继承传入的基础组件,所以成为反向继承。由于高阶组件继承了基础组件,那么高阶组件通过this可以操作基础组件的state,props以及基础组件的方法,甚至可以通过super来操作基础组件的生命周期。

a、渲染劫持

所谓渲染劫持就是,高阶组件控制了基础组件渲染生成的结果,因为基础组件的渲染被控制,高阶组件就可以对它做点什么。。。比如:

(1)、看心情(根据条件),控制渲染的结果;
(2)、改变dom树的样式;
(3)、改变基础组件中一下被渲染元素的props;
(4)、操作dom树中的元素。

这个就是根据props传入的条件来决定要不要渲染。

const HOCComponent = (BaseComponent) => {
  return class Enhancer extends BaseComponent{
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}

通过super.render()获取基础组件的dom树,然后就可以进行一些操作,改变dom树的样式,改变基础组件中一下被渲染元素的props,操作dom树中的元素等等。

HOCComponent = (BaseComponent) => {
  return class Enhancer extends BaseComponent {
    render() {
      const domsTree = super.render()
      let newProps = {};
      if (domsTree && domsTree.type === 'input') {
        newProps = {value: 'this is new value'}
      }
      const props = Object.assign({}, domsTree.props, newProps)
      const newDomsTree = React.cloneElement(domsTree, props, domsTree.props.children)
      return newDomsTree
    }
  }
}


b、操作state 

高阶组件可以读取、编辑和删除 基础组件 实例的 state,如果你需要,你也可以给它添加更多的 state。需要注意的是,这会搞乱基础组件 的 state,导致你可能会破坏某些东西。所以,要限制高阶组件读取或添加 state,添加 state 时应该放在单独的命名空间里,而不是和基础组件的 state 混在一起。

另外,高阶组件配合compose实现功能模块化,和个功能模块的随意组合使用。(见上文github例子)

每一个高阶组件封装一种功能,例如例子中的AddStaff,ChangeStaffData,DeleteStaff,ShowStaffMsg,可以根据需要将高阶组件组合到任意的基础组件中,实现功能模块化,也方便代码的抽离和复用。


来源:https://www.cnblogs.com/this-day/archive/2018/05/16/9041532.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/775

必须要会的 50 个React 面试题

如果你是一位有抱负的前端程序员并准备面试,那么这篇文章很适合你。本文是你学习和面试 React 所需知识的完美指南。JavaScript 工具缓慢而稳定地在市场中扎根,对 React 的需求呈指数级增长。选择合适的技术来开发应用或网站变得越来越有挑战性

react中实现可拖动div

把拖动div功能用react封装成class,在页面直接引入该class即可使用。title为可拖动区域。panel为要实现拖动的容器。优化了拖动框超出页面范围的情况,也优化了拖动太快时鼠标超出可拖动区域的情况

函数式的React

React 是现在最流行的 JavaScript 库之一。使用 React 可以非常轻松地创建 Web 用户交互界面。 它的成功有很多因素,但也许其中一个因素是清晰有效的编程方法。在 React 的世界中,UI 是由一个一个组件所组成的。

新手学习 react 迷惑的点

网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的

react-navigation 监听顶部导航栏点击/滑动状态

使用createMaterialTopTabNavigator创建顶部导航栏,希望实现切换到指定的Tab再获取数据,查看官方文档只能找到tabBarOnPress 方法监听点击回调,但是无法监听滑动切换

React 开发者常见的 3 个错误

关于前端开发,我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在掌握各种编程语言、库和框架,但仍然一无所知。因为我们都在学习,这也意味着我们都容易犯错误

React事件处理函数必须使用bind(this)的原因

学习React的过程中发现调用函数的时候必须使用bind(this),之后直接在class中声明函数即可正常使用,但是为什么呢,博主进行了一番查阅,总结如下。

如何扩展 Create React App 的 Webpack 配置

Create React App(以下简称 CRA)是创建 React 应用的一个脚手架,它与其他脚手架不同的一个地方就是将一些复杂工具(比如 webpack)的配置封装了起来,让使用者不用关心这些工具的具体配置,从而降低了工具的使用难度。

为什么说React 16是开发者的福音?

就像人们对更新移动应用程序和操作系统感到兴奋一样,开发人员也应该对更新框架感到兴奋。不同框架的新版本具有新特性和开箱即用的技巧。下面是将现有应用程序从 React 15 迁移到 React 16 时应该考虑的一些好特性。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!