這篇文章主要講解了“新手React開(kāi)發(fā)人員容易做錯(cuò)的事有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“新手React開(kāi)發(fā)人員容易做錯(cuò)的事有哪些”吧!
志丹ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景,ssl證書(shū)未來(lái)市場(chǎng)廣闊!成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道,可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠!如果有意向歡迎電話聯(lián)系或者加微信:13518219792(備注:SSL證書(shū)合作)期待與您的合作!
1. 忘記大寫(xiě)React組件
考慮一下這段代碼,它創(chuàng)建一個(gè)簡(jiǎn)單的div,其中包含父組件的標(biāo)題。里面有一個(gè)子組件,其中包含帶有一些文本的div。
class childComponent extends React.Component { render() { return ( <div className='childDiv'> <p>Child Component</p> </div> ); } } class ParentComponent extends React.Component { render() { return ( <div className='parentDiv'> <h2 className='parentHeader'>Parent Component</h2> <childComponent /> </div> ); } } export default ParentComponent;
您認(rèn)為代碼運(yùn)行時(shí)會(huì)出現(xiàn)什么?
childComponent 未渲染。它去哪兒了?代碼編譯成功,終端也沒(méi)有錯(cuò)誤。
再次查看子組件的代碼。注意組件的名稱,你注意到什么不同了嗎?
在瀏覽器中打開(kāi)控制臺(tái),瀏覽器控制臺(tái)警告的大小寫(xiě)不正確
事實(shí)證明,React將小寫(xiě)組件視為DOM標(biāo)記。如果你是React的新手,你可能已經(jīng)錯(cuò)過(guò)了React文檔中的這個(gè)小細(xì)節(jié)。
如果不了解這一點(diǎn),初學(xué)者常常會(huì)陷入這樣的困惑:即他們的代碼編譯沒(méi)有任何錯(cuò)誤,到底哪里出了問(wèn)題?
解決方法很簡(jiǎn)單,大寫(xiě)您的組件。
2. 錯(cuò)誤地調(diào)用收到的props
要訪問(wèn)由父組件傳入的prop,子組件必須確保它們調(diào)用了正確的prop名稱。
還可以使用另一個(gè)變量名將Props傳遞給子組件??紤]以下代碼片段:
class ChildComponent extends React.Component { render() { const { randomString } = this.props; return ( <div className='childDiv'> <p>{randomString}</p> </div> ); } } class ParentComponent extends React.Component { render() { const randomString = 'lorem ipsum'; return ( <div className='parentDiv'> <h2 className='parentHeader'>Parent Component</h2> <ChildComponent mainText={randomString} /> </div> ); } }
盡管此代碼可以編譯并運(yùn)行無(wú)誤,但 ChildComponent內(nèi)不會(huì)渲染任何文本。
<ChildComponent mainText={randomString} />
仔細(xì)看看這一行代碼,在 ParentComponent 中聲明的變量 randomString 作為名為 mainText 的prop傳遞給 ChildComponent。
然而,ChildComponent 試圖從它收到的prop中訪問(wèn) randomString。由于它僅接收 mainText 作為prop,因此將導(dǎo)致未定義的值分配給在 ChildComponent 中聲明的 randomString。結(jié)果,其
標(biāo)記內(nèi)未呈現(xiàn)任何內(nèi)容。
注意哪些prop被傳遞到您的組件中,并相應(yīng)地訪問(wèn)它們。這將在調(diào)試期間為您節(jié)省一些不必要的麻煩。
3. 傳遞不正確的Props類(lèi)型
如果所接收的prop不是預(yù)期的類(lèi)型,那么依賴于這些接收prop的組件可能會(huì)有不同的行為。
class ChildComponent extends React.Component { render() { const { showIntro, showBody } = this.props; return ( <div className='childDiv'> {showIntro && <p>Hello!</p>} {showBody && <p>Spot the mistake!</p>} </div> ); } }
考慮這個(gè)有兩個(gè)prop的 ChildComponent:showIntro 和 showBody。它顯示“你好!和“發(fā)現(xiàn)錯(cuò)誤!”只有當(dāng)showIntro 和 showBody 分別設(shè)置為 true 時(shí)才會(huì)這樣。
ChildComponent 希望將兩個(gè)布爾值作為prop傳遞。如果在父組件中執(zhí)行類(lèi)似的操作,會(huì)發(fā)生什么情況?
<ChildComponent showIntro='false' showBody='false' /> <ChildComponent showIntro={'false'} showBody={'false'} /> <ChildComponent showIntro={false} showBody={false} />
在prop中使用了不同的引號(hào)和大括號(hào)。但是,它們的行為將不同。看看這個(gè):
前兩個(gè) ChildComponent 都渲染了兩個(gè)<p>標(biāo)記,而最后一個(gè) ChildComponent 沒(méi)有渲染。
作為prop傳遞的 'false' 和 {'false'} 會(huì)導(dǎo)致無(wú)意中為 showIntro 和 showBody 分配了一個(gè)值為 false 的字符串,而不是布爾值 false。
對(duì)于前兩個(gè) ChildComponent,將 showIntro 和 showBody 都計(jì)算為 true。
這是由于 && 運(yùn)算符的隱式強(qiáng)制類(lèi)型轉(zhuǎn)換。當(dāng) && 運(yùn)算符檢查 showIntro 或 showBody(均為字符串)時(shí),兩個(gè)字符串都將強(qiáng)制為 true。
最后一個(gè) ChildComponent 接收到布爾值 false,因此它沒(méi)有正確渲染任何內(nèi)容。
console.log(`showIntro type: ${typeof showIntro}`); console.log(`showIntro evaluated to: ${showIntro && true}`); console.log(`showBody type: ${typeof showBody}`); console.log(`showBody evaluated to: ${showBody && true}`);
為了確認(rèn)這一點(diǎn),我們運(yùn)行 console.log() 來(lái)檢查每個(gè) ChildComponent 中prop的運(yùn)行結(jié)果。
正如這里所演示的,初學(xué)者在將prop傳遞給其他組件時(shí)能夠區(qū)分使用引號(hào)和花括號(hào)之間的區(qū)別是非常重要的。
您可以使用引號(hào)來(lái)傳遞字符串文字。
<MyComponent data='Hello World!'/> // passing in a String
花括號(hào)用于傳遞JavaScript表達(dá)式。
<MyComponent data={2468} /> // passing in a Number <MyComponent data={true} /> // passing in a Boolean
以下是Reac文檔中的一些注意事項(xiàng):
將JavaScript表達(dá)式嵌入屬性中時(shí),請(qǐng)勿在大括號(hào)周?chē)由弦?hào)。您應(yīng)該使用引號(hào)(用于字符串值)或大括號(hào)(用于表達(dá)式),但不要在同一屬性中都使用引號(hào)。 |
4. 在render()內(nèi)部調(diào)用setState()
下圖無(wú)限循環(huán)錯(cuò)誤消息
盡管您的組件中沒(méi)有 componentWillUpdate() 或 componentWillUpdate(),您仍可能遇到此錯(cuò)誤。當(dāng)您在 render() 函數(shù)中調(diào)用 setState() 時(shí)也會(huì)發(fā)生此錯(cuò)誤。
為什么會(huì)這樣?每次調(diào)用 setState() 時(shí),React將通過(guò)調(diào)用 render() 重新渲染。您的 render() 函數(shù)內(nèi)部是什么?setState()。你看到結(jié)果了嗎?一個(gè)無(wú)限循環(huán)。
只需將 setState() 調(diào)用移到 render() 函數(shù)之外即可。
如果在組件掛載后必須初始化狀態(tài)(也許是從API端點(diǎn)提取數(shù)據(jù)),請(qǐng)?jiān)?componentDidMoun() 中進(jìn)行。
如果可以在組件掛載之前初始化狀態(tài),也可以使用構(gòu)造函數(shù)來(lái)完成。
5. setState()的異步性
在調(diào)試時(shí),通常使用 console.log() 打印值。但是,當(dāng)代碼異步運(yùn)行時(shí),這不能很好地工作。
handleCounterIncrement = () => { const { counter } = this.state; console.log(`Before update: ${counter}`); this.setState({ counter: counter + 1 }); console.log(`After update: ${counter}`); };
你以前試過(guò)這樣做嗎?壞消息——setState() 調(diào)用是異步的。不能保證給定的代碼將按順序執(zhí)行。它可能導(dǎo)致如下輸出:
在執(zhí)行 setState() 之前執(zhí)行了兩個(gè) console.log() 調(diào)用。因此,它兩次打印前一個(gè)狀態(tài)的值。
如果希望在調(diào)用 setState() 之前和之后檢查狀態(tài)的值,請(qǐng)?jiān)?setState() 中將回調(diào)作為第二個(gè)參數(shù)傳遞。
handleCounterIncrement = () => { const { counter } = this.state; console.log(`before update: ${counter}`); this.setState({ counter: counter + 1 }, () => { console.log(`after update: ${this.state.counter}`); }); };
回調(diào)將在 setState() 完成后執(zhí)行,從而為 console.log() 提供同步行為。
感謝各位的閱讀,以上就是“新手React開(kāi)發(fā)人員容易做錯(cuò)的事有哪些”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)新手React開(kāi)發(fā)人員容易做錯(cuò)的事有哪些這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián),小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
新聞名稱:新手React開(kāi)發(fā)人員容易做錯(cuò)的事有哪些
鏈接地址:http://muchs.cn/article42/jepghc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供服務(wù)器托管、虛擬主機(jī)、品牌網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、面包屑導(dǎo)航、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)