摘要:也就是說,如果能處理名為的這個高階組件返回的組件則完全無視這個。先展示我是一個組件,我設置了兩秒,之后展示倒計時完成
概況: 什么是高階組件?
高階部件是一種用于復用組件邏輯的高級技術,它并不是 React API的一部分,而是從React 演化而來的一種模式。 具體地說,高階組件就是一個接收一個組件并返回另外一個新組件的函數!
這是官方文檔說的,我沒有截全,因為后面的解釋會造成誤解,但簡單講高階組件(函數)就好比一個加工廠,同樣的,屏幕、cpu、揚聲器、鍵盤按鍵、外殼、電池,小米手機工廠組裝完就是小米手機,魅族手機組裝完就是魅族手機,基本材料都是相同的,不同工廠(高階組件)有不同的實現及產出,當然這個工廠(高階組件)也可能是針對某個基本材料的處理。
總之產出的結果擁有了輸入組件不具備的功能,輸入的組件可以是一個組件的實例,也可以是一個組件類,還可以是一個無狀態組件的函數。
隨著項目越來越復雜,開發過程中,多個組件需要某個功能,而且這個功能和頁面并沒有關系,所以也不能簡單的抽取成一個新的組件,但是如果讓同樣的邏輯在各個組件里各自實現,無疑會導致重復的代碼。比如頁面有三種彈窗一個有title,一個沒有,一個又有右上角關閉按鈕,除此之外別無它樣,你總不能整好幾個彈窗組件吧,這里除了tilte,關閉按鈕其他的就可以做為上面說的基本材料。
高階組件總共分為兩大類
代理方式
操縱prop
訪問ref(不推薦)
抽取狀態
包裝組件
繼承方式
操縱生命周期
操縱prop
代理方式之 操縱propimport React from "react" function HocRemoveProp(WrappedComponent) { return class WrappingComPonent extends React.Component { render() { const { user, ...otherProps } = this.props; return} } } export default HocRemoveProp;
接下來我把簡化了寫法,把匿名函數去掉,同時換成箭頭函數
import React from "react" const HocAddProp = (WrappedComponent,uid) => class extends React.Component { render() { const newProps = { uid, }; return} } export default HocAddProp;
上面HocRemoveProp高階組件中,所做的事情和輸入組件WrappedComponent功能一樣,只是忽略了名為user的prop。也就是說,如果WrappedComponent能處理名為user的prop,這個高階組件返回的組件則完全無視這個prop。
const { user, ...otherProps } = this.props;
這是一個利用es6語法技巧,經過上面的語句,otherProps里面就有this.props中所有的字段除了user.
假如我們現在不希望某個組件接收user的prop,那么我們就不要直接使用這個組件,而是把這個組件作為參數傳遞給HocRemoveProp,然后我們把這個函數的返回結果當作組件來使用
兩個高階組件的使用方法:
const newComponent = HocRemoveProp(SampleComponent); const newComponent = HocAddProp(SampleComponent,"1111111");
也可以利用decorator語法糖這樣使用
import React, { Component } from "React"; @HocRemoveProp class SampleComponent extends Component { render() {} } export default SampleComponent;代理方式之 抽取狀態
將所有的狀態的管理交給外面的容器組件,這個模式就是 抽取狀態
外面的容器就是這個高階組件
const HocContainer = (WrappedComponent) => class extends React.Component { constructor(props) { super(props) this.state = { name: "" } } onNameChange = (event) => { this.setState({ name: event.target.value }) } render() { const newProps = { name: { value: this.state.name, onChange: this.onNameChange } } return} }
@HocContainer class SampleComponent extends React.Component { render() { return } }
這樣當我們在使用這個已經被包裹的input組件(SampleComponent)時候
它的值就被放在了HocContainer高階組件中,當很多這樣的input組件都用這個HocContainer高階組件時,那么它們的值都將保存在這個HocContainer高階組件中
const HocStyleComponent = (WrappedComponent, style) => class extends React.Component { render() { return () } }
這樣使用
import HocStyleComponent from "./HocStyleComponent"; const colorSytle ={color:"#ff5555"} const newComponent = HocStyleComponent(SampleComponent, colorSytle);
-代理方式的生命周期的過程類似于堆棧調用:
didmount 一> HOC didmount 一>(HOCs didmount) 一>(HOCs will unmount) 一>HOC will unmount一>unmount
const MyContainer = (WrappedComponent) => class extends WrappedComponent { render() { return super.render(); } }
這個例子很簡單,相當于把WrappedComponent組件的render方法,通過super.render()方法吐到了MyContainer 中,可以順序調用。
繼承方式的生命周期的過程類似于隊列調用:
didmount 一> HOC didmount 一>(HOCs didmount) 一>will unmount一>HOC will unmount一> (HOCs will unmount)
代理方式下WrappedComponent會經歷一個完整的生命周期,產生的新組件和參數組件是兩個不同的組件,一次渲染,兩個組件都會經歷各自的生命周期,
在繼承方式下,產生的新組件和參數組件合二為一,super.render只是生命周期中的函數,變成一個生命周期。
來看下面的例子你就會明白了。
繼承方式之 操縱生命周期(渲染劫持)首先創建一個高階,在創建一個使用高階組件的組件,也就是是輸入組件,最后我在改變這個輸入組件props
import * as React from "react"; const HocComponent = (WrappedComponent) => class MyContainer extends WrappedComponent { render() { if (this.props.time && this.state.success) { return super.render() } return倒計時完成了...} }
這個高階組件會直接讀取輸入組件中的props,state,然后控制了輸入組件的render展示
只有在props.time和state.success同時為真的時候才會展示
import * as React from "react"; import HocComponent from "./HocComponent" @HocComponent class DemoComponent extends React.Component { constructor(props) { super(props); this.state = { success: true, }; } render() { return我是一個組件} } export default DemoComponent;
然后調用,遞減time數值直到變為0
最后頁面的效果就是,當然他不是循環的。先展示”我是一個組件“,我設置了兩秒,之后展示”倒計時完成“.
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/98314.html
摘要:因為這個高階函數,賦予了普通組件一種呼吸閃爍的能力記住這句話,圈起來重點考。其實,高階組件就是把一些通用的處理邏輯封裝在一個高階函數中,然后返回一個擁有這些邏輯的組件給你。 原文地址:https://github.com/SmallStoneSK/Blog/issues/6 1. 前言 老畢曾經有過一句名言,叫作國慶七天樂,Coding最快樂~。所以在這漫漫七天長假,手癢了怎么辦?于是...
摘要:前言月份開始出沒社區,現在差不多月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了一般來說,差不多到了轉正的時候,會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客,博文推薦分享給大家。 1.前言 6月份開始出沒社區,現在差不多9月了,按照工作的說法,就是差不多過了三個月的試用期,準備轉正了!一般來說,差不多到了轉正的時候,會進行總結或者分享會議!那么今天我就...
摘要:也明確了大數據時代,前端所應該具備的職業素養高階組件高階組件,高階組件就是一個組件包裹著另外一個組件中兩種的實現方法中兩種的實現方法返回的類繼承了。之所以被稱為是因為被繼承了,而不是繼承了。在這種方式中,它們的關系看上去被反轉了。 前言 最近一直再做數據可視化,業務的理解,數據的理解確實如數據可視化要求的一樣,有了更多的理解。但是技術上還停留在echart,Hchart, 畫圖上。正好...
摘要:兄弟組件之間無法直接通信,它們需要利用同一層的上級作為中轉站。在兩個地方會用到,一是通過提交后需要拿到里面的數據,二是利用監聽到發生變化后調用它來獲取新的數據。 前言 在學習react的過程中,深深的被react的函數式編程的模式所吸引,一切皆組件,所有的東西都是JavaScript。React框架其實功能很單一,主要負責渲染的功能,但是社區很活躍,衍生出了很多優秀的庫和工具。個人覺得...
閱讀 3233·2021-11-22 12:07
閱讀 1876·2021-10-12 10:11
閱讀 1041·2019-08-30 15:44
閱讀 2935·2019-08-30 12:45
閱讀 2184·2019-08-29 16:41
閱讀 1636·2019-08-29 16:35
閱讀 2620·2019-08-29 12:57
閱讀 1147·2019-08-26 13:51