react高階元件的使用，一次就會！

2021-09-24 06:43:45 字數 1942 閱讀 5179

為什麼使用高階元件？為了提高元件復用率，我們首先想到的是抽離相同的邏輯，在react中就有了hoc(higher-order components)的概念，所以react中的高階元件是用來提高元件復用率的。

高階元件是乙個函式，傳入乙個元件，返回另乙個新的元件，產生的新的元件可以對屬性進行包裝，也可以重寫部分生命週期。

高階元件中返回新的元件，可以是class形式，也可以是無狀態元件的形式，下面看看高階元件中怎麼返回乙個無狀態元件。

現在有乙個需求，需要乙個元件，傳入某本書的的書名，根據書名獲取到章節，由於根據書名獲取到章節的這部分邏輯是相同的，所以我們可以抽取成為乙個公共元件，這個公共元件就是高階元件。

新建src/hoc.js，裡面定義乙個展示某本書章節的無狀態元件book，props.name為書名，props.section為章節：

import react from


'react'


function


book(props)  - 


div>


)}export


default book


複製**
在src/index.js中使用該元件，傳入書名，渲染在根節點：

import react from


'react';


import reactdom from


'react-dom';


import hoc from


'./hoc';


reactdom.render(name="react"/>, document.getelementbyid('root'));


複製**
還差乙個根據書名獲取到章節的高階元件withsection，在book元件中使用這個高階元件：

function


book(props) 


const withsection = com =>  section= />)}


}export default withsection(book)


複製**
這個獲取章節的高階元件傳入的是乙個元件book，返回的是乙個無狀態元件，在返回的這個元件中把獲取章節的邏輯處理了，book本來沒有章節的資訊，在使用高階元件後就有了。

npm start，瀏覽器輸出

react - 章節 - 高階元件的無狀態元件


複製**
如果我們要在高階元件withsection裡面使用生命週期函式，這時候withsection裡面的無狀態元件就不適用了，我們需要用到class形式的元件。

// 高階元件裡使用生命週期函式


const withsection = com => 


componentdidmount() )


}render()  section= />}}


return getsection


}複製**
除了給book元件加根據書名獲取章節名的高階元件，我們還想記錄一下使用者閱讀的時間，那應該怎麼辦？高階元件可以鏈式呼叫，可以巢狀多個高階元件，我們再來定義乙個高階元件withuserlog：

const withuserlog = com => 


render()  />}}


return getuserlog


}複製**
巢狀使用高階元件就行了：

function


book(props) 


const withsection = com => 


const withuserlog = com => 


// 鏈式呼叫


export


default withuserlog(withsection(book))


複製**

react之高階元件（一）

當兩個或多個元件有相同的地方，可以將相同的部分抽離出來 先建立三個元件a b c a.js 1 import react,from react 23 class a extends component 11 1213 export default a b.js import react,from r...

react的高階元件

1 什麼是高階元件？2 侵入式import react from react import loding from common loading 侵入式 因為要訪問它的內部狀態，所以要用到繼承，繼承他的父級 export default wrapcomponent else 3 非侵入式 hoc w...

React中的高階元件

高階元件 hoc,high order component 是react中用於重組元件邏輯的高階技術，是一種程式設計模式而不是react的api。直觀來講，高階元件是以某一元件作為引數返回乙個新元件的函式。高階函式 要了解高階元件，首先我們要了解下什麼是高階函式！特徵 1.函式可以作為引數傳遞 2....