初識react高階組件

IamDLY 發布于2019-08-22 16:15 / 2767人閱讀

摘要：也明確了大數據時代，前端所應該具備的職業素養高階組件高階組件，高階組件就是一個組件包裹著另外一個組件中兩種的實現方法中兩種的實現方法返回的類繼承了。之所以被稱為是因為被繼承了，而不是繼承了。在這種方式中，它們的關系看上去被反轉了。

前言

最近一直再做數據可視化，業務的理解，數據的理解確實如數據可視化要求的一樣，有了更多的理解。但是技術上還停留在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初識初識關系數據庫高階函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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