摘要:已經(jīng)被廢除,具體缺陷可以參考二為了解決的缺陷,第二種解決方案是高階組件簡稱。我們定義了父組件,存在自身的,并且將自身的通過的方式傳遞給了子組件。返回一個標(biāo)識該的變量,以及更新該的方法。
??為了實(shí)現(xiàn)分離業(yè)務(wù)邏輯代碼,實(shí)現(xiàn)組件內(nèi)部相關(guān)業(yè)務(wù)邏輯的復(fù)用,在React的迭代中針對類組件中的代碼復(fù)用依次發(fā)布了Mixin、HOC、Render props等幾個方案。此外,針對函數(shù)組件,在React v16.7.0-alpha 中提出了hooks的概念,在本身無狀態(tài)的函數(shù)組件,引入獨(dú)立的狀態(tài)空間,也就是說在函數(shù)組件中,也可以引入類組件中的state和組件生命周期,使得函數(shù)組件變得豐富多彩起來,此外,hooks也保證了邏輯代碼的復(fù)用性和獨(dú)立性。
??本文從針對類組件的復(fù)用解決方案開始說起,先后介紹了從Mixin、HOC到Render props的演進(jìn),最后介紹了React v16.7.0-alpha 中的 hooks以及自定義一個hooks
Mixin
HOC
Render props
React hooks的介紹以及如何自定義一個hooks
原文地址在我的博客中:https://github.com/forthealll...
歡迎star和fork~
一、MixinMixin是最早出現(xiàn)的復(fù)用類組件中業(yè)務(wù)邏輯代碼的解決方案,首先來介紹以下如何適應(yīng)Mixin。下面是一個Mixin的例子:
const someMixins={ printColor(){ console.log(this.state.color); } setColor(newColor){ this.setState({color:newColor}) } componentDidMount(){ .. } }
下面是一個使用Mixin的組件:
class Apple extends React.Component{ //僅僅作為演示,mixins一般是通過React.createClass創(chuàng)建,并且ES6中沒有這種寫法 mixins:[someMixins] constructor(props){ super(props); this.state={ color:"red" } this.printColor=this.printColor.bind(this); } render(){ return這是一個蘋果} }
在類中mixin引入公共業(yè)務(wù)邏輯:
mixins:[someMixins]
從上面的例子,我們來總結(jié)以下mixin的缺點(diǎn):
Mixin是可以存在多個的,是一個數(shù)組的形式,且Mixin中的函數(shù)是可以調(diào)用setState方法組件中的state的,因此如果有多處Mixin的模塊中修改了相同的state,會無法確定state的更新來源
ES6 classes支持的是繼承的模式,而不支持Mixins
Mixin會存在覆蓋,比如說兩個Mixin模塊,存在相同生命周期函數(shù)或者相同函數(shù)名的函數(shù),那么會存在相同函數(shù)的覆蓋問題。
Mixin已經(jīng)被廢除,具體缺陷可以參考Mixins Considered Harmful
二、HOC??為了解決Mixin的缺陷,第二種解決方案是高階組件(high order component,簡稱HOC)。
1、舉例幾種HOC的形式??HOC簡單理解就是組件工廠,接受原始組件作為參數(shù),添加完功能與業(yè)務(wù)后,返回新的組件。下面來介紹HOC參數(shù)的幾個例子。
(1)參數(shù)僅為原始組件const redApple = withFruit(Apple);(2)參數(shù)為原始組件和一個對象
const redApple = withFruit(Apple,{color:"red",weight:"200g"});
但是這種情況比較少用,如果對象中僅僅傳遞的是屬性,其實(shí)完全可以通過組件的props實(shí)現(xiàn)值的傳遞,我們用HOC的主要目的是分離業(yè)務(wù),關(guān)于UI的展示,以及一些組件中的屬性和狀態(tài),我們一般通過props來指定比較方便
(3)參數(shù)為原始組件和一個函數(shù)const redApp=withFruit(App,()=>{console.log("I am a fruit")})(4)柯里化
最常見的是僅以一個原始組件作為參數(shù),但是在外層包裹了業(yè)務(wù)邏輯,比如react-redux的conect函數(shù)中:
class Admin extends React.Component{ } const mapStateToProps=(state)=>{ return { }; } const mapDispatchToProps=(dispatch)=>{ return { } } const connect(mapStateToProps,mapDispatchToProps)(Admin)2、HOC的缺點(diǎn)
HOC解決了Mixin的一些缺陷,但是HOC本身也有一些缺點(diǎn):
(1)難以溯源,且存在屬性覆蓋問題??如果原始組件A,先后通過工廠函數(shù)1,工廠函數(shù)2,工廠函數(shù)3….構(gòu)造,最后生成了組件B,我們知道組件B中有很多與A組件不同的props,但是我們僅僅通過組件B,并不能知道哪個組件來自于哪個工廠函數(shù)。同時(shí),如果有2個工廠函數(shù)同時(shí)修改了組件A的某個同名屬性,那么會有屬性覆蓋的問題,會使得前一個工廠函數(shù)的修改結(jié)果失效。
(2)HOC是靜態(tài)構(gòu)建的??所謂靜態(tài)構(gòu)建,也就是說生成的是一個新的組件,并不會馬上render,HOC組件工廠是靜態(tài)構(gòu)建一個組件,這類似于重新聲明一個組件的部分。也就是說,HOC工廠函數(shù)里面的聲明周期函數(shù),也只有在新組件被渲染的時(shí)候才會執(zhí)行。
(3)會產(chǎn)生無用的空組件 三、Render Prop??Render Props從名知義,也是一種剝離重復(fù)使用的邏輯代碼,提升組件復(fù)用性的解決方案。在被復(fù)用的組件中,通過一個名為“render”(屬性名也可以不是render,只要值是一個函數(shù)即可)的屬性,該屬性是一個函數(shù),這個函數(shù)接受一個對象并返回一個子組件,會將這個函數(shù)參數(shù)中的對象作為props傳入給新生成的組件。
??這種方法跟直接的在父組件中,將父組件中的state直接傳給子組件的區(qū)別是,通過Render Props不用寫死子組件,可以動態(tài)的決定父組件需要渲染哪一個子組件。
或者再概括一點(diǎn):
Render Props就是一個函數(shù),做為一個屬性被賦值給父組件,使得父組件可以根據(jù)該屬性去渲染子組件。
(1)標(biāo)準(zhǔn)父子組件通信方法??首先來看常用的在類組件中常用的父子組件,父組件將自己的狀態(tài)state,通過props傳遞給子組件。
class Son extends React.Component{ render(){ const {feature} = this.props; returnMy hair is {feature.hair} My nose is {feature.nose}} } class FatherToSon extends React.Component{ constructor(){ this.state = { hair:"black", nose:"high" } } render(){ return} }
??我們定義了父組件FatherToSon,存在自身的state,并且將自身的state通過props的方式傳遞給了子組件。
??這種就是常見的利用組件的props父子間傳值的方式,這個值可以是變量,對象,也可以是方法,但是僅僅使用只能一次性的給特定的子組件使用。如果現(xiàn)在有個Daughter組件也想復(fù)用父組件中的方法或者狀態(tài),那么必須新構(gòu)建一個新組件:
class FatherToDaughter extends React.Component{ constructor(){ this.state = { hair:"black", nose:"high" } } render(){ return} }
從上面的例子可以看出通過標(biāo)準(zhǔn)模式的父子組件的通信方法,雖然能夠傳遞父組件的狀態(tài)和函數(shù),但是無法實(shí)現(xiàn)復(fù)用。
(2)Render Props的引出我們根據(jù)Render Props的特點(diǎn):
Render Props就是一個函數(shù),做為一個屬性被賦值給父組件,使得父組件可以根據(jù)該屬性去渲染子組件。
重新去實(shí)現(xiàn)上述的(1)中的例子。
class FatherChild extends React.Component{ constructor(){ this.state = { hair:"black", nose:"high" } } render(){{this.props.render} } }
此時(shí)如果子組件要復(fù)用父組件中的屬性或者函數(shù),則可以直接使用,比如子組件Son現(xiàn)在可以直接調(diào)用:
( )} />
如果子組件Daughter要復(fù)用父組件的方法,可以直接調(diào)用:
( )} />
??從這個例子中可以看出,通過Render Props我們實(shí)現(xiàn)同樣實(shí)現(xiàn)了一個組件工廠,可以實(shí)現(xiàn)業(yè)務(wù)邏輯代碼的復(fù)用,相比與HOC,Render Props有以下幾個優(yōu)點(diǎn)。
不用擔(dān)心props的命名問題
可以溯源,子組件的props一定是來自于直接父組件
是動態(tài)構(gòu)建的
Render Props也有一個缺點(diǎn):
就是無法利用SCU這個生命周期,來實(shí)現(xiàn)渲染性能的優(yōu)化。
四、React hooks的介紹以及如何自定義一個hooks??hooks概念在React Conf 2018被提出來,并將在未來的版本中被引入,hooks遵循函數(shù)式編程的理念,主旨是在函數(shù)組件中引入類組件中的狀態(tài)和生命周期,并且這些狀態(tài)和生命周期函數(shù)也可以被抽離,實(shí)現(xiàn)復(fù)用的同時(shí),減少函數(shù)組件的復(fù)雜性和易用性。
??hooks相關(guān)的定義還在beta中,可以在React v16.7.0-alpha中體驗(yàn),為了渲染hooks定義的函數(shù)組件,必須執(zhí)行React-dom的版本也為v16.7.0-alpha,引入hooks必須先安裝:
npm i -s React@16.7.0-alpha npm i -s React-dom@16.7.0-alpha
??hooks主要有三部分組成,State Hooks、Effect Hooks和Custom Hooks,下面分別來一一介紹。
(1)State Hooks??跟類組件一樣,這里的state就是狀態(tài)的含義,將state引入到函數(shù)組件中,同時(shí)類組件中更新state的方法為setState,在State Hooks中也有相應(yīng)的更新狀態(tài)的方法。
function ExampleWithManyStates() { // 聲明各種state以及更新相應(yīng)的state的方法 const [age, setAge] = useState(42); const [fruit, setFruit] = useState("banana"); const [todos, setTodos] = useState([{ text: "Learn Hooks" }]); // ... }
??上述就聲明了3個State hooks,相應(yīng)的方法為useState,該方法創(chuàng)建一個傳入初始值,創(chuàng)建一個state。返回一個標(biāo)識該state的變量,以及更新該state的方法。
??從上述例子我們來看,一個函數(shù)組件是可以通過useState創(chuàng)建多個state的。此外State Hooks的定義必須在函數(shù)組件的最高一級,不能在嵌套,循環(huán)等語句中使用。
function ExampleWithManyStates() { // 聲明各種state以及更新相應(yīng)的state的方法 if(Math.random()>1){ const [age, setAge] = useState(42); const [todos, setTodos] = useState([{ text: "Learn Hooks" }]); }else{ const [fruit, setFruit] = useState("banana"); const [todos, setTodos] = useState([{ text: "Learn Hooks" }]); } // ... }
??上述的方式是不被允許的,因?yàn)橐粋€函數(shù)組件可以存在多個State Hooks,并且useState返回的是一個數(shù)組,數(shù)組的每一個元素是沒有標(biāo)識信息的,完全依靠調(diào)用useState的順序來確定哪個狀態(tài)對應(yīng)于哪個變量,所以必須保證使用useState在函數(shù)組件的最外層,此外后面要介紹的Effect Hooks的函數(shù)useEffect也必須在函數(shù)組件的最外層,之后會詳細(xì)解釋。
(2)Effect Hooks??通過State Hooks來定義組件的狀態(tài),同樣通過Effect Hooks來引入生命周期,Effect hooks通過一個useEffect的方法,以一種極為簡化的方式來引入生命周期。
來看一個更新的例子:
import { useState, useEffect } from "react"; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return (); }You clicked {count} times
上述就是一個通過useEffect來實(shí)現(xiàn)組件中生命周期的例子,useEffect整合了componentDidMount和componentDidUpdate,也就是說在componentDidMount和componentDidUpdate的時(shí)候都會執(zhí)行一遍useEffect的函數(shù),此外為了實(shí)現(xiàn)componentWillUnmount這個生命周期函數(shù),useEffect函數(shù)如果返回值是一個函數(shù),這個函數(shù)就被定義成在componentWillUnmount這個周期內(nèi)執(zhí)行的函數(shù)。
useEffect(() => { //componentDidMount和componentDidUpdate周期的函數(shù)體 return ()=>{ //componentWillUnmount周期的函數(shù)體 } });
如果存在多個useState和useEffect時(shí),必須按順序書寫,定義一個useState后,緊接著就使用一個useEffect函數(shù)。
useState("Mary") useEffect(persistForm) useState("Poppins") useEffect(updateTitle)
因此通useState一樣,useEffect函數(shù)也必須位于函數(shù)組件的最高一級。
(3)Effect Hooks的補(bǔ)充上述我們知道useEffect其實(shí)包含了componentDidMount和componentDidUpdate,如果我們的方法僅僅是想在componentDidMount的時(shí)候被執(zhí)行,那么必須傳遞一個空數(shù)組作為第二個參數(shù)。
useEffect(() => { //僅在componentDidMount的時(shí)候執(zhí)行 },[]);
上述的方法會僅僅在componentDidMount,也就是函數(shù)組件第一次被渲染的時(shí)候執(zhí)行,此后及時(shí)狀態(tài)更新,也不會執(zhí)行。
此外,為了減少不必要的狀態(tài)更新和渲染,可以如下操作:
useEffect(() => { //僅在componentDidMount的時(shí)候執(zhí)行 },[stateName]);
在上述的這個例子中,只有stateName的值發(fā)生改變,才會去執(zhí)行useEffect函數(shù)。
(4)Custom Hooks自定義hooks可以將useState和useEffect的狀態(tài)和生命周期函數(shù)抽離,組成一個新的函數(shù),該函數(shù)就是一個自定義的封裝完畢的hooks。
這是我寫的一個hooks ---> dom-location,
可以這樣引入:
npm i -s dom-location
并且可以在函數(shù)組件中使用。這個自定義的hooks也很簡單,就是封裝了狀態(tài)和生命周期函數(shù)。
import { useState, useEffect } from "react" const useDomLocation = (element) => { let [elementlocation,setElementlocation] = useState(getlocation(element)); useEffect(()=>{ element.addEventListener("resize",handleResize); return ()=>{ element.removeEventListener("resize", handleResize); } },[]); function handleResize(){ setElementlocation(getlocation(element)); } function getlocation(E){ let rect = E.getBoundingClientRect() let top = document.documentElement.clientTop let left= document.documentElement.clientLeft return{ top : rect.top - top, bottom : rect.bottom - top, left : rect.left - left, right : rect.right - left }; } return elementlocation }
然后直接在函數(shù)中使用:
import useDomLocation from "dom-location"; function App() { .... let obj = useDomLocation(element); }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/114140.html
摘要:已經(jīng)被廢除,具體缺陷可以參考二為了解決的缺陷,第二種解決方案是高階組件簡稱。我們定義了父組件,存在自身的,并且將自身的通過的方式傳遞給了子組件。返回一個標(biāo)識該的變量,以及更新該的方法。 ??為了實(shí)現(xiàn)分離業(yè)務(wù)邏輯代碼,實(shí)現(xiàn)組件內(nèi)部相關(guān)業(yè)務(wù)邏輯的復(fù)用,在React的迭代中針對類組件中的代碼復(fù)用依次發(fā)布了Mixin、HOC、Render props等幾個方案。此外,針對函數(shù)組件,在Reac...
摘要:已經(jīng)被廢除,具體缺陷可以參考二為了解決的缺陷,第二種解決方案是高階組件簡稱。我們定義了父組件,存在自身的,并且將自身的通過的方式傳遞給了子組件。返回一個標(biāo)識該的變量,以及更新該的方法。 ??為了實(shí)現(xiàn)分離業(yè)務(wù)邏輯代碼,實(shí)現(xiàn)組件內(nèi)部相關(guān)業(yè)務(wù)邏輯的復(fù)用,在React的迭代中針對類組件中的代碼復(fù)用依次發(fā)布了Mixin、HOC、Render props等幾個方案。此外,針對函數(shù)組件,在Reac...
摘要:此優(yōu)化有助于避免在每個渲染上進(jìn)行昂貴的計(jì)算。同樣也是一個函數(shù),接受兩個參數(shù),第一個參數(shù)為函數(shù),第二個參數(shù)為要比對的值,返回一個值。同理,第二個參數(shù)傳入的值沒有更新時(shí),不會執(zhí)行。以上代碼的地址為初體驗(yàn) 什么是Hooks?Hooks是react即將推出的功能,它允許您在不編寫類的情況下使用狀態(tài)和其他React功能。我的理解就是可以用寫無狀態(tài)組件的方式去編寫擁有狀態(tài)的組件。遺憾的是,正式版1...
摘要:官方也陳述,接下來的的工作會投入到中。從目前官方的文檔可以看出,從以下四個方面來提高的編碼。生命周期自定義方法的主要用途是替代之前版本的組件。說明到目前為止,在已發(fā)布的版本中有該功能,想體驗(yàn)該功能,必須安裝。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前還是Proposal階段。 官方也陳述,接下來的90%的工作會投入到React ...
閱讀 1897·2021-11-24 09:39
閱讀 2134·2021-09-22 15:50
閱讀 1991·2021-09-22 14:57
閱讀 699·2021-07-28 00:13
閱讀 1064·2019-08-30 15:54
閱讀 2355·2019-08-30 15:52
閱讀 2686·2019-08-30 13:07
閱讀 3787·2019-08-30 11:27