初识react高阶组件

IamDLY 发布于2019-08-22 16:15 / 2764人阅读

摘要：也明确了大数据时代，前端所应该具备的职业素养高阶组件高阶组件，高阶组件就是一个组件包裹着另外一个组件中两种的实现方法中两种的实现方法返回的类继承了。之所以被称为是因为被继承了，而不是继承了。在这种方式中，它们的关系看上去被反转了。

前言

最近一直再做数据可视化，业务的理解，数据的理解确实如数据可视化要求的一样，有了更多的理解。但是技术上还停留在echart，Hchart, 画图上。正好一个机会，看了流形大大的知乎live。对大数据有了更深的了解。也明确了大数据时代，前端所应该具备的职业素养

高阶组件

高阶组件HOC（Higher Order Component，高阶组件）就是一个 React 组件包裹着另外一个 React 组件

React 中两种 HOC 的实现方法

React 中两种 HOC 的实现方法：Props Proxy (PP) and Inheritance Inversion (II)

## Props Proxy (PP)

function ppHOC(WrappedComponent) {
 return class PP extends React.Component {
   render() {
     return 
   }
 }
}

## Inheritance Inversion (II)

function iiHOC(WrappedComponent) {
 return class Enhancer extends WrappedComponent {
   render() {
     return super.render()
   }
 }
}

返回的 HOC 类（Enhancer）继承了 WrappedComponent。之所以被称为 Inheritance Inversion 是因为 WrappedComponent 被 Enhancer 继承了，而不是 WrappedComponent 继承了 Enhancer。在这种方式中，它们的关系看上去被反转（inverse）了。

Inheritance Inversion 允许 HOC 通过 this 访问到 WrappedComponent，意味着它可以访问到 state、props、组件生命周期方法和 render 方法

一致化处理（Reconciliation process)

一致化处理(Reconciliation)包括的就是React元素的比较以及对应的React元素不同时对DOM的更新，即可理解为React 内部将虚拟 DOM 同步更新到真实 DOM 的过程，包括新旧虚拟 DOM 的比较及计算最小 DOM 操作。

这很重要，意味着 Inheritance Inversion 的高阶组件不一定会解析完整子树

Inheritance Inversion 作用

渲染劫持（Render Highjacking）

操作 state

渲染劫持（Render Highjacking）

在由 render输出的任何 React 元素中读取、添加、编辑、删除 props

export function IIHOCDEBUGGER(WrappedComponent) {
  return class II extends WrappedComponent {
    render() {
      return (
        
          HOC Debugger Component
          Props
 {JSON.stringify(this.props, null, 2)}
          State
{JSON.stringify(this.state, null, 2)}
          {super.render()}
        
      )
    }
  }
}

读取和修改由 render 输出的 React 元素树

function iiHOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      const elementsTree = super.render()
      let newProps = {};
      if (elementsTree && elementsTree.type === "input") {
        newProps = {value: "may the force be with you"}
      }
      const props = Object.assign({}, elementsTree.props, newProps)
      const newElementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children)
      return newElementsTree
    }
  }
}

有条件地渲染元素树

function iiHOC(WrappedComponent) {
  return class Enhancer extends WrappedComponent {
    render() {
      if (this.props.loggedIn) {
        return super.render()
      } else {
        return null
      }
    }
  }
}

把样式包裹进元素树（就像在 Props Proxy 中的那样）

高阶组件例子

// app.js
import React, {Component} from "react";
import logo from "./logo.svg";
import "./App.css";

import Auth from "./auth";

// 发帖组件
class Btn extends Component {

    send() {
        alert("发帖子");
    }

    render() {
        return (
            
        )
    }
}

// 喜欢组件
class BtnLike extends Component {

    send() {
        alert("喜欢");
    }

    render() {
        return (
            
        )
    }
}

class App extends Component {
    render() {
        // 高阶组件Auth()
        let AuthBtn = Auth(Btn),
            AuthBtnLike = Auth(BtnLike);

        return (
            
                
                    
                    Welcome to React
                
                
                    To get started1, edit src/App.js and save to reload.
                
                
                
            
        );
    }
}

export default App;

// 高阶组件 Auth.js
/**
 * Created by Rayr Lee on 2017/11/19.
 */

import React from "react";

var isLogin = false;
// 控制能否登录 
window.isLogin = isLogin;
// Props Proxy (PP) 的最简实现：
// function ppHOC(WrappedComponent) {  
//     return class PP extends React.Component {    
//       render() {      
//         return     
//       }  
//     } 
//   }
export default function (ComposedComponent) {
    return class extends React.Component {

        tips() {
            alert("请登录");
        }

        render() {

            return (
                isLogin ?
                     :
                    
            )
        }
    }
}

参考

深入理解 React 高阶组件

[为什么React和Immutable是好朋友](https://juejin.im/post/59171f...

)

GPU云服务器云服务器高阶组件 docker初识初识关系数据库高阶函数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94179.html

初识React(7)：高阶组件

摘要：什么是高阶组件高阶组件，听着好像很高大尚，但是其实高阶组件就是一个函数的参数是组件，返回的是一个新的组件。在上面那个例子中，就是父级，继承了父级中的所有东西。什么是高阶组件高阶组件，听着好像很高大尚，但是其实高阶组件就是一个函数的参数是组件，返回的是一个新的组件。那么，高阶组件有什么好处呢，高阶组件可以减少代码冗余，把共有的代码提取出来，下面有个例子说明下： import Reac...

printempw 2019-08-23 11:36 评论0 收藏0
2017-06-28 前端日报

摘要：前端日报精选我是如何实现的在线升级热更新功能的张鑫旭鑫空间鑫生活翻译表单的运用第期晋升评审的套路异步编程的四种方式黄博客精选组件设计和分解思考掘金中文译使登录页面变得正确掘金前端从强制开启压缩探究插件运行机制掘金个常用的简 2017-06-28 前端日报精选我是如何实现electron的在线升级热更新功能的？ « 张鑫旭-鑫空间-鑫生活【翻译】React 表单： Refs 的运用【...

QLQ 2019-08-20 17:36 评论0 收藏0
[源码阅读]高性能和可扩展的React-Redux

摘要：到主菜了，先看它的一看，我们应该有个猜测，这货是个高阶函数。可能有点绕，但就是这么一个个高阶函数组成的，后面会详细说。定义了一个处理函数和高阶函数执行次的方法，这个方法比上面的复杂在于它需要检测参数是否订阅了。注意：文章很长，只想了解逻辑而不深入的，可以直接跳到总结部分。初识首先，从它暴露对外的API开始 ReactReduxContext /* 提供了 React.creat...

shuibo 2019-08-26 13:22 评论0 收藏0
React系列---React（一）初识React

摘要：系列一初识系列二组件的和系列三组件的生命周期是推出的一个库，它的口号就是用来创建用户界面的库，所以它只是和用户界面打交道，可以把它看成中的视图层。系列一初识系列二组件的和系列三组件的生命周期 React系列---React（一）初识ReactReact系列---React（二）组件的prop和stateReact系列---React（三）组件的生命周期 showImg(https://...

lanffy 2019-08-20 17:27 评论0 收藏0
初识React(8)：父子组件传参

摘要：父级向子级传参父子组件通信主要用到，如下在父组件中父组件我是父级过来的内容在子组件中子组件通过上面例子可以看出，在父组件中，我们引入子组件，通过给子组件添加属性，来起到传参的作用，子组件可以通过获取父组件传过来的参数子级向父级传参在父组件中父级向子级传参父子组件通信主要用到props，如下：在父组件中： import React from react import ChildCo...

paulli3 2019-08-23 11:48 评论0 收藏0