成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

初識(shí)react高階組件

IamDLY / 2828人閱讀

摘要：也明確了大數(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。對(duì)大數(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 通過(guò) this 訪問(wèn)到 WrappedComponent，意味著它可以訪問(wèn)到 state、props、組件生命周期方法和 render 方法
一致化處理（Reconciliation process)

一致化處理(Reconciliation)包括的就是React元素的比較以及對(duì)應(yīng)的React元素不同時(shí)對(duì)DOM的更新，即可理解為React 內(nèi)部將虛擬 DOM 同步更新到真實(shí) DOM 的過(guò)程，包括新舊虛擬 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) 的最簡(jiǎn)實(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("請(qǐng)登錄");
        }

        render() {

            return (
                isLogin ?
                     :
                    
            )
        }
    }
}
參考

深入理解 React 高階組件

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

)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/94179.html

相關(guān)文章

  • 初識(shí)React(7)：高階組件

    摘要：什么是高階組件高階組件，聽(tīng)著好像很高大尚，但是其實(shí)高階組件就是一個(gè)函數(shù)的參數(shù)是組件，返回的是一個(gè)新的組件。在上面那個(gè)例子中，就是父級(jí)，繼承了父級(jí)中的所有東西。 什么是高階組件 高階組件，聽(tīng)著好像很高大尚，但是其實(shí)高階組件就是一個(gè)函數(shù)的參數(shù)是組件，返回的是一個(gè)新的組件。那么，高階組件有什么好處呢，高階組件可以減少代碼冗余，把共有的代碼提取出來(lái)，下面有個(gè)例子說(shuō)明下： import Reac...

    printempw 評(píng)論0 收藏0

  • 2017-06-28 前端日?qǐng)?bào)

    摘要：前端日?qǐng)?bào)精選我是如何實(shí)現(xiàn)的在線升級(jí)熱更新功能的張?chǎng)涡聆慰臻g鑫生活翻譯表單的運(yùn)用第期晉升評(píng)審的套路異步編程的四種方式黃博客精選組件設(shè)計(jì)和分解思考掘金中文譯使登錄頁(yè)面變得正確掘金前端從強(qiáng)制開(kāi)啟壓縮探究插件運(yùn)行機(jī)制掘金個(gè)常用的簡(jiǎn) 2017-06-28 前端日?qǐng)?bào) 精選 我是如何實(shí)現(xiàn)electron的在線升級(jí)熱更新功能的？ ? 張?chǎng)涡?鑫空間-鑫生活【翻譯】React 表單： Refs 的運(yùn)用【...

    QLQ 評(píng)論0 收藏0

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

    摘要：到主菜了，先看它的一看，我們應(yīng)該有個(gè)猜測(cè)，這貨是個(gè)高階函數(shù)。可能有點(diǎn)繞，但就是這么一個(gè)個(gè)高階函數(shù)組成的，后面會(huì)詳細(xì)說(shuō)。定義了一個(gè)處理函數(shù)和高階函數(shù)執(zhí)行次的方法，這個(gè)方法比上面的復(fù)雜在于它需要檢測(cè)參數(shù)是否訂閱了。 注意：文章很長(zhǎng)，只想了解邏輯而不深入的，可以直接跳到總結(jié)部分。 初識(shí) 首先，從它暴露對(duì)外的API開(kāi)始 ReactReduxContext /* 提供了 React.creat...

    shuibo 評(píng)論0 收藏0

  • React系列---React（一）初識(shí)React

    摘要：系列一初識(shí)系列二組件的和系列三組件的生命周期是推出的一個(gè)庫(kù)，它的口號(hào)就是用來(lái)創(chuàng)建用戶界面的庫(kù)，所以它只是和用戶界面打交道，可以把它看成中的視圖層。系列一初識(shí)系列二組件的和系列三組件的生命周期 React系列---React（一）初識(shí)ReactReact系列---React（二）組件的prop和stateReact系列---React（三）組件的生命周期 showImg(https://...

    lanffy 評(píng)論0 收藏0

  • 初識(shí)React(8)：父子組件傳參

    摘要：父級(jí)向子級(jí)傳參父子組件通信主要用到，如下在父組件中父組件我是父級(jí)過(guò)來(lái)的內(nèi)容在子組件中子組件通過(guò)上面例子可以看出，在父組件中，我們引入子組件，通過(guò)給子組件添加屬性，來(lái)起到傳參的作用，子組件可以通過(guò)獲取父組件傳過(guò)來(lái)的參數(shù)子級(jí)向父級(jí)傳參在父組件中 父級(jí)向子級(jí)傳參 父子組件通信主要用到props，如下： 在父組件中： import React from react import ChildCo...

    paulli3 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<