資訊專欄INFORMATION COLUMN
摘要：為了提高代碼的復(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，真的是很痛苦。于是乎組件化成為了當(dāng)前前端開(kāi)發(fā)的主流技術(shù)。angular、vue和react很好的幫我們實(shí)現(xiàn)了組件化。
但是我們常常也會(huì)遇到一種情況，就是兩個(gè)組件往往有很多的重復(fù)代碼(可能是相同的屬性，也可能是相同的方法)。例如，在登錄和注冊(cè)組件中，都會(huì)有用戶名和密碼，以及對(duì)他們的校驗(yàn)規(guī)則。為了提高代碼的復(fù)用性和可維護(hù)性，React高階函數(shù)應(yīng)運(yùn)而生。
React之前對(duì)此的解決方案是mixin，但這造成和很多不必要的問(wèn)題，后來(lái)就被廢棄掉了。使用過(guò)vue的同學(xué)，不知道有沒(méi)有使用過(guò)mixin，react高階函數(shù)的作用和它是一樣的。
高階組件到底是個(gè)什么東西？高階組件其實(shí)是一個(gè)函數(shù)，它并不是一個(gè)組件，我們需要向它傳遞一些參數(shù)(想要操作的組件、屬性)。這么說(shuō)起來(lái)它其實(shí)一點(diǎn)也不高階，它的作用就是存儲(chǔ)一些公共的屬性和方法。
我們經(jīng)常幾個(gè)人吃過(guò)一個(gè)鍋底的那種火鍋，鍋底里有火鍋底料和各種佐料，我們把肉和蔬菜等放進(jìn)去涮一下，就可以美美的飽餐一頓。高階函數(shù)在react編程中扮演的角色就是火鍋鍋底的角色，它有公用的方法和屬性，而各種組件就是肉和蔬菜。如果是一個(gè)人一個(gè)鍋的火鍋就像沒(méi)有經(jīng)過(guò)封裝的code，代碼量重復(fù)且維護(hù)困難。
如何實(shí)現(xiàn)高階函數(shù)？我們先來(lái)看一段可以使用高階函數(shù)的代碼:
這里有一個(gè)Second組件，它負(fù)責(zé)展示用戶名username
export class Second extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ""
}
}
componentWillMount() {
let username = localStorage.getItem("username");
this.setState({
username: username
});
}
render() {
return(
Hi {this.state.username}
)
}
}
下面是一個(gè)Third組件，它也負(fù)責(zé)展示用戶名
export class Third extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ""
}
}
componentWillMount() {
let username = localStorage.getItem("username");
this.setState({
username: username
});
}
render() {
return(
Hi {this.state.username}
我今年18歲了
)
}
}
我們看到這兩個(gè)組件除了名稱以外，其余大量的代碼是一樣的，我們完全可以考慮將它們通用的代碼提取出來(lái)。下面就是高階組件出場(chǎng)的時(shí)候了。
高階組件可以寫成這樣
export const HighOrderComponent = (WrapComponent, title) => {
return class HOC extends React.Component {
constructor(props) {
super(props);
this.state = {
username: ""
}
}
componentWillMount() {
let username = localStorage.getItem("username");
this.setState({
username: username
});
}
static displayName = `HOC(${getDisplayName(WrapComponent)})`;
render() {
return(
WrapComponent 是我們要操作的組件
title 是它們的標(biāo)題參數(shù)
username 就是我們常用的props，它負(fù)責(zé)向組件傳遞值，我們下面還會(huì)提到
使用高階組件之后我們要對(duì)Second和Third組件進(jìn)行修改，修改如下
class Second extends React.Component {
render() {
return(
Hi {this.props.username}
曉不曉得哪里好耍
)
}
}
export const HighOrderSecond = HighOrderComponent(Second, "Second Page");
class Third extends React.Component {
render() {
return(
Hi {this.props.username}
)
}
}
export const HighOrderThird = HighOrderComponent(Third, "Third Page");
很多同學(xué)可能會(huì)問(wèn)，export出去的常量是干什么用的，它就是高階組件對(duì)組件進(jìn)行封裝之后的一個(gè)全新的組件，是兩者的結(jié)合。到此，我們?cè)谄渌?yè)面引用組件就不再是引用Second和Third組件了，要引用的就是HighOrderSecond和HighOrderThird了。
細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)一些不同的地方，對(duì)于Second和Third的公共legend提取出去了，但并沒(méi)有將h2對(duì)應(yīng)得標(biāo)題提取出去，這里只是想給大家說(shuō)一下，在對(duì)組件使用高階組件包裹之后，高階組件就變成了組件的父組件，它的state可以通過(guò)props的方式向子組件傳遞，username就是這樣。我們?cè)赾hrome的react插件中可以觀察到這一點(diǎn)
HOC已經(jīng)將Second組件包裹起來(lái)，成為了它的父組件，它上面的match和location是我使用了react-router的緣故，我們可以不用去管它。它的state——username作為props傳給了Second
今天給大家簡(jiǎn)單的介紹了React高階組件的一些知識(shí)，后續(xù)還會(huì)再深入的挖掘React高階組件的知識(shí)和大家分享，希望對(duì)大家有幫助。文章轉(zhuǎn)自個(gè)人掘金賬號(hào)，轉(zhuǎn)載請(qǐng)注明出處，謝謝
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89412.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）中都...
摘要：博客地址背景知識(shí)在開(kāi)始講述高階組件前，我們先來(lái)回顧高階函數(shù)的定義接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類函數(shù)，被稱作高階函數(shù)。 博客地址：http://www.luckyjing.com/post... 背景知識(shí) 在開(kāi)始講述高階組件前，我們先來(lái)回顧高階函數(shù)的定義：接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類函數(shù)，被稱作高階函數(shù)。對(duì)于高階組件，它描述的便是接受React組件作為輸入，輸出...
摘要：結(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ù)作...
摘要：高階組件高階函數(shù)接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類函數(shù)高階組件接收組件作為輸入，輸出一個(gè)新的組件的組件。包含了一系列實(shí)用的高階組件庫(kù)拖動(dòng)庫(kù)深入理解高階組件其中詳細(xì)介紹了屬性代理和反向繼承的區(qū)別。 React高階組件 高階函數(shù)： 接收函數(shù)作為輸入，或者輸出另一個(gè)函數(shù)的一類函數(shù)； 高階組件： 接收React組件作為輸入，輸出一個(gè)新的React組件的組件。 高階組件通過(guò)包裹一個(gè)新傳入...
閱讀 736·2025-02-07 13:40
閱讀 1045·2025-02-07 13:37
閱讀 1102·2024-11-06 13:38
閱讀 1192·2024-09-10 13:19
閱讀 1311·2024-08-22 19:45
閱讀 1490·2021-11-19 09:40
閱讀 2844·2021-11-18 13:14
閱讀 4422·2021-10-09 10:02
