初識react高階組件

IamDLY 發(fā)布于2019-08-22 16:15 / 2795人閱讀

摘要：也明確了大數(shù)據(jù)時(shí)代，前端所應(yīng)該具備的職業(yè)素養(yǎng)高階組件高階組件，高階組件就是一個(gè)組件包裹著另外一個(gè)組件中兩種的實(shí)現(xiàn)方法中兩種的實(shí)現(xiàn)方法返回的類繼承了。之所以被稱為是因?yàn)楸焕^承了，而不是繼承了。在這種方式中，它們的關(guān)系看上去被反轉(zhuǎn)了。

前言

最近一直再做數(shù)據(jù)可視化，業(yè)務(wù)的理解，數(shù)據(jù)的理解確實(shí)如數(shù)據(jù)可視化要求的一樣，有了更多的理解。但是技術(shù)上還停留在echart，Hchart, 畫圖上。正好一個(gè)機(jī)會(huì)，看了流形大大的知乎live。對大數(shù)據(jù)有了更深的了解。也明確了大數(shù)據(jù)時(shí)代，前端所應(yīng)該具備的職業(yè)素養(yǎng)

高階組件

高階組件HOC（Higher Order Component，高階組件）就是一個(gè) React 組件包裹著另外一個(gè) React 組件

React 中兩種 HOC 的實(shí)現(xiàn)方法

React 中兩種 HOC 的實(shí)現(xiàn)方法：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 是因?yàn)?WrappedComponent 被 Enhancer 繼承了，而不是 WrappedComponent 繼承了 Enhancer。在這種方式中，它們的關(guān)系看上去被反轉(zhuǎn)（inverse）了。

Inheritance Inversion 允許 HOC 通過 this 訪問到 WrappedComponent，意味著它可以訪問到 state、props、組件生命周期方法和 render 方法

一致化處理（Reconciliation process)

一致化處理(Reconciliation)包括的就是React元素的比較以及對應(yīng)的React元素不同時(shí)對DOM的更新，即可理解為React 內(nèi)部將虛擬 DOM 同步更新到真實(shí) DOM 的過程，包括新舊虛擬 DOM 的比較及計(jì)算最小 DOM 操作。

這很重要，意味著 Inheritance Inversion 的高階組件不一定會(huì)解析完整子樹

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
      }
    }
  }
}

把樣式包裹進(jìn)元素樹（就像在 Props Proxy 中的那樣）

高階組件例子

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

import Auth from "./auth";

// 發(fā)帖組件
class Btn extends Component {

    send() {
        alert("發(fā)帖子");
    }

    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) 的最簡實(shí)現(xiàn)：
// 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云服務(wù)器云服務(wù)器高階組件 docker初識初識關(guān)系數(shù)據(jù)庫高階函數(shù)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94179.html

發(fā)表評論

登陸后可評論

0條評論

IamDLY

男|高級講師

我要關(guān)注我要私信

TA的文章

怎么安裝tensorflow模塊

閱讀 1094·2023-04-26 02:02
gcorelabs：美國物理服務(wù)器,邁阿密機(jī)房;E5-2623v4型號CPU/提供75折優(yōu)惠

閱讀 2438·2021-09-26 10:11
php抽獎(jiǎng)實(shí)現(xiàn)

閱讀 3584·2019-08-30 13:10
實(shí)現(xiàn)三欄布局的幾種方法

閱讀 3779·2019-08-29 17:12
css3 制作圓環(huán)進(jìn)度條

閱讀 750·2019-08-29 14:20
PostCSS 是個(gè)什么鬼東西？

閱讀 2216·2019-08-28 18:19
詳解 mpvue 小程序框架及和原生的差異

閱讀 2262·2019-08-26 13:52
親歷，創(chuàng)業(yè)公司如何死掉的

閱讀 983·2019-08-26 13:43

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

初識react高階組件

HOC Debugger Component

Welcome to React

相關(guān)文章

**初識React(7)：高階組件**

2017-06-28 前端日報(bào)

**[源碼閱讀]高性能和可擴(kuò)展的React-Redux**

***React系列---React（一）初識React***

**初識React(8)：父子組件傳參**

發(fā)表評論

0條評論

IamDLY

男|高級講師

TA的文章

怎么安裝tensorflow模塊

gcorelabs：美國物理服務(wù)器,邁阿密機(jī)房;E5-2623v4型號CPU/提供75折優(yōu)惠

php抽獎(jiǎng)實(shí)現(xiàn)

實(shí)現(xiàn)三欄布局的幾種方法

css3 制作圓環(huán)進(jìn)度條

PostCSS 是個(gè)什么鬼東西？

詳解 mpvue 小程序框架及和原生的差異

親歷，創(chuàng)業(yè)公司如何死掉的

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

初識react高階組件

HOC Debugger Component

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！