資訊專欄INFORMATION COLUMN
摘要：高階組件深入理解作用以及應(yīng)用本文主要以通俗易懂的語(yǔ)言表達(dá)自己對(duì)高階組件的一些見(jiàn)解，希望大家多多提問(wèn)高階組件深入理解高階組件就是一個(gè)函數(shù)，傳給它一個(gè)組件，它返回一個(gè)新的組件。新的組件使用傳入的組件作為子組件。
react高階組件深入理解、作用以及應(yīng)用
本文主要以通俗易懂的語(yǔ)言表達(dá)自己對(duì)高階組件的一些見(jiàn)解，希望大家多多提問(wèn)
高階組件深入理解高階組件就是一個(gè)函數(shù)，傳給它一個(gè)組件，它返回一個(gè)新的組件。新的組件使用傳入的組件作為子組件。
首先根據(jù)定義我們明白它就是一個(gè)函數(shù)，而且它必須有返回值，返回值是一個(gè)組件，當(dāng)然這里我們高階組件可以嵌套（這里是一篇入門的文章，之后我會(huì)更新高階組件多層嵌套）
高階組件的作用一直以來(lái)我們都是看到新的知識(shí)都是一直學(xué)習(xí)，一直看官方文檔，沒(méi)有靜下心來(lái)想一想到底為什么這個(gè)新知識(shí)能夠在這個(gè)時(shí)候出現(xiàn)？為什么它剛出現(xiàn)就這么火？它到底在什么情況下用？它能解決什么問(wèn)題……等等這一系列的問(wèn)題
我第一次見(jiàn)到這個(gè)詞是在redux中解讀connect組件時(shí)，看到這個(gè)詞，官方文檔也有具體說(shuō)明個(gè)人推薦到這里去看，比官方文檔，解釋的更好
其實(shí)高階組件就是把公用的一些部分提出來(lái)，把修改的部分以參數(shù)的形勢(shì)傳進(jìn)去，在這里可能有人會(huì)說(shuō)這那需用什么高階組件，我自己封裝一個(gè)組件也可以達(dá)到同樣的效果，簡(jiǎn)單的組件在這里你可能通過(guò)封裝來(lái)實(shí)現(xiàn)，但是我舉兩個(gè)例子大家在想一下怎么通過(guò)組建封裝來(lái)實(shí)現(xiàn)：1、antd組件的form組件，2、我們?cè)趓edux中組件頂部寫一行代碼@connect之后就可以在組件中通過(guò)this.props訪問(wèn)store中的數(shù)據(jù)和一些修改數(shù)據(jù)的方法
這里也許也會(huì)有一些大牛說(shuō)我可以實(shí)現(xiàn)，但是大牛畢竟比較少，可能許多程序員在心理都會(huì)覺(jué)得自己是大牛，在這里我可以告大家一個(gè)檢測(cè)自己實(shí)力的方法：就是沒(méi)事的時(shí)候把建立投一下阿里或者是京東，然后去面試一下，我敢保證許多人就會(huì)現(xiàn)行；
高階組件的用處說(shuō)了那么多廢話，說(shuō)點(diǎn)有用的吧，高階組件一般用在那些地方呢
我們從一個(gè)實(shí)際問(wèn)題來(lái)理解并學(xué)習(xí)高階組件：有類似的幾個(gè)組件但是組件內(nèi)部只有少部分是不同的，它們身上都還有一些公用的方法，并且這些少部分組件組件都還要調(diào)用大組件的方法或者訪問(wèn)它的一些數(shù)據(jù)
我們來(lái)分一下：1，這幾個(gè)組件的大部分樣式和功能是相同的，我們可以可以思考能不能只寫一次；2、它們不同的地方還會(huì)觸發(fā)一些相同的方法；3、不同的地方只是內(nèi)部的一小部分
如果我們按照組件封裝的方法來(lái)實(shí)現(xiàn)的的話，我們封裝一個(gè)大組件，然后把不同的小組件傳進(jìn)去，然后通過(guò)props把方法傳到小組件，通過(guò)回調(diào)觸發(fā)，但是這里有一個(gè)問(wèn)題，我們寫這幾個(gè)組件的時(shí)候每次都要把大組件寫一遍然后把子組件嵌入進(jìn)去
加入這里我們采用高階組件來(lái)實(shí)現(xiàn)的話，我們只需要把公用的方法和數(shù)據(jù)寫到高階函數(shù)返回的組件中，然后把組件傳進(jìn)去就可以了，最后在每個(gè)調(diào)用這個(gè)大組件的地方直接調(diào)用這個(gè)函數(shù)就可以了。
在上圖中我們的代碼可以這樣來(lái)實(shí)現(xiàn)
//先寫高階組件
export default class HigherOrderComponent(InputComponent){
return class NewComponent extends Component{
constructor(){
super()
this.state={
initalState:123
}
}
commonFunc=()=>{
}
render(){
return(
)
}
}
}
//再來(lái)寫outerComponent
import HigherOrderComponent from "HigherOrderComponent";
import MinComponent1 from "MinComponent1";
import MinComponent2 from "MinComponent2";
class OuterComponent extends Component{
render(){
return(
{HigherOrderComponent(minComponent1)}
{HigherOrderComponent(minComponent2)}
)
}
}
這樣這個(gè)outerComponent就寫完了,直接在這個(gè)編輯器里寫的，代碼可能會(huì)有以下小的錯(cuò)誤，大家諒解
大家可以考慮一下這個(gè)組件加入要用我們組件封裝嵌套的方式寫的話能不能也寫的簡(jiǎn)單點(diǎn)，歡迎大家在評(píng)論區(qū)寫上自己的實(shí)現(xiàn)方式，方便大家一起討論
高階組件的應(yīng)用上面一不小心連高階組件的應(yīng)用也寫了，大概就是這么個(gè)過(guò)程，希望可以對(duì)大家有一些幫助
下班了，看明天有時(shí)間我把那兩個(gè)小組件也更新一下，我們?cè)谛〗M件中可以通過(guò)this.props來(lái)訪問(wèn)高階組件的方法和數(shù)據(jù)
謝謝……文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98736.html
摘要：在項(xiàng)目中用好高階組件，可以顯著提高代碼質(zhì)量。高階組件的定義類比于高階函數(shù)的定義。高階函數(shù)接收函數(shù)作為參數(shù)，并且返回值也是一個(gè)函數(shù)。 React 深入系列，深入講解了React中的重點(diǎn)概念、特性和模式等，旨在幫助大家加深對(duì)React的理解，以及在項(xiàng)目中更加靈活地使用React。 1. 基本概念 高階組件是React 中一個(gè)很重要且比較復(fù)雜的概念，高階組件在很多第三方庫(kù)（如Redux）中都...
摘要：結(jié)語(yǔ)高階函數(shù)對(duì)于初學(xué)者來(lái)說(shuō)可能不太好理解，但當(dāng)你深入其中，了解其中的原理之后，我們可以使用高階函數(shù)來(lái)完成很多的工作。 前段時(shí)間在工作中寫Hybrid頁(yè)面時(shí)遇到了這樣的一個(gè)場(chǎng)景，公司需要一系列的活動(dòng)組件，在每個(gè)組件注冊(cè)的時(shí)候都需要調(diào)用App端提供的一個(gè)接口。一開(kāi)始也考慮了幾種方式，包括mixin、組件繼承以及react高階組件。但經(jīng)過(guò)了種種衡量，最后選擇使用了高階組件的做法。 1、Mix...
01、介紹 React 高階組件也叫做 React HOC(High Order Component), 它是react中的高級(jí)技術(shù), 用來(lái)重用組件邏輯。 但高階組件本身并不是React API。它只是一種模式，這種模式是由react自身的組合性質(zhì)必然產(chǎn)生的。 那么在學(xué)習(xí)高階組件之前有一個(gè)概念我們必須清楚，就是高階函數(shù)。 02、高階函數(shù) 概念：高階函數(shù)是一個(gè)函數(shù)，它接收函數(shù)作為參數(shù)或?qū)⒑瘮?shù)作...
摘要：也就是說(shuō)，如果能處理名為的這個(gè)高階組件返回的組件則完全無(wú)視這個(gè)。先展示我是一個(gè)組件，我設(shè)置了兩秒，之后展示倒計(jì)時(shí)完成 概況： 什么是高階組件？ 高階部件是一種用于復(fù)用組件邏輯的高級(jí)技術(shù)，它并不是 React API的一部分，而是從React 演化而來(lái)的一種模式。 具體地說(shuō)，高階組件就是一個(gè)接收一個(gè)組件并返回另外一個(gè)新組件的函數(shù)！ 這是官方文檔說(shuō)的，我沒(méi)有截全，因?yàn)楹竺娴慕忉寱?huì)造成誤解...
摘要：高階組件可以封裝公共邏輯，給當(dāng)前組件傳遞方法屬性，添加生命周期鉤子等。二是基礎(chǔ)組件的靜態(tài)方法也會(huì)因?yàn)楦唠A組件的包裹會(huì)丟失。如果在開(kāi)發(fā)中確實(shí)遇到了必須使用它們，就一定要注意高階組件的這個(gè)問(wèn)題并認(rèn)真解決。 高階組件可以封裝公共邏輯，給當(dāng)前組件傳遞方法屬性，添加生命周期鉤子等。 案例： 一個(gè)項(xiàng)目中有的頁(yè)面需要判斷所處環(huán)境，如果在移動(dòng)端則正常顯示頁(yè)面，并向用戶提示當(dāng)前頁(yè)面所處的移動(dòng)端環(huán)境，如果...
摘要：為了提高代碼的復(fù)用性和可維護(hù)性，高階函數(shù)應(yīng)運(yùn)而生。使用過(guò)的同學(xué)，不知道有沒(méi)有使用過(guò)，高階函數(shù)的作用和它是一樣的。高階函數(shù)在編程中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種組件就是肉和蔬菜。 為什么要使用高階組件？ 想想以前用原生和jQuery的項(xiàng)目，上千行的code映入眼簾，瞬間有種昏死過(guò)去的沖動(dòng)。代碼難以維護(hù)，改一個(gè)bug可能出現(xiàn)N個(gè)bug，真的是很痛苦。于是乎組件化...
閱讀 3090·2023-04-26 00:40
閱讀 2435·2021-09-27 13:47
閱讀 4353·2021-09-07 10:22
閱讀 2990·2021-09-06 15:02
閱讀 3348·2021-09-04 16:45
閱讀 2534·2021-08-11 10:23
閱讀 3629·2021-07-26 23:38
閱讀 2923·2019-08-30 15:54
