React組件化的一些額外知識點補充
React的額外補充
Portals的使用
某些情況下，我們希望渲染的內(nèi)容獨立于父組件，甚至是獨立于當(dāng)前掛載到的DOM元素中(默認都是掛載到id為root的DOM 元素上的)。
Portal 提供了一種將子節(jié)點渲染到存在于父組件以外的 DOM 節(jié)點的優(yōu)秀的方案:
第一個參數(shù)(child)是任何可渲染的 React 子元素，例如一個元素，字符串或 fragment;
第二個參數(shù)(container)是一個 DOM 元素;
import { createPortal } from 'react-dom'
export class App extends PureComponent {
render() {
return (
<div className='app'>
<h2>App h1</h2>
{ createPortal(<h2>App h2</h2>, document.querySelector('#abc')) }
</div>
)
}
}
通常來講，當(dāng)你從組件的 render 方法返回一個元素時，該元素將被掛載到 DOM 節(jié)點中離其最近的父節(jié)點:
然而，有時候?qū)⒆釉夭迦氲?DOM 節(jié)點中的不同位置也是有好處的:
比如說，我們準備開發(fā)一個Modal組件，它可以將它的子組件渲染到一個單獨的節(jié)點, 這個節(jié)點在屏幕的中間位置:
步驟一:修改index.html添加新的節(jié)點
<div id="root"></div> <div id="abc"></div> <!-- 添加新節(jié)點 --> <div id="modal"></div>
步驟二:編寫這個節(jié)點的樣式
#modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: skyblue;
}
步驟三:編寫組件代碼, 將組件中傳遞過來的元素渲染到modal節(jié)點上
export class Modal extends PureComponent {
render() {
return createPortal(this.props.children, document.querySelector("#modal"))
}
}
步驟四:在根組件App中使用Modal組件并且向Modal組件中傳遞一些元素
export class App extends PureComponent {
render() {
return (
<div className='app'>
<Modal>
<h2>Modal的標題</h2>
<p>Modal的內(nèi)容</p>
</Modal>
</div>
)
}
}
這樣傳遞給Modal組件的元素就會被單獨渲染到modal節(jié)點上, 且該節(jié)點會顯示在屏幕的正中央
Fragment的使用
在之前的開發(fā)中，我們總是在一個組件中返回內(nèi)容時包裹一個div元素:
我們又希望可以不渲染這樣一個div應(yīng)該如何操作呢?
這個時候就可以使用Fragment, 使用Fragment需要先導(dǎo)入Fragment在react包下
Fragment 允許你將子列表分組，而不會渲染到頁面中, 類似于Vue中的template和小程序當(dāng)中的block;
import React, { PureComponent, Fragment } from 'react'
export class App extends PureComponent {
render() {
return (
<Fragment>
<h2>我是標題</h2>
<p>我是內(nèi)容, 哈哈哈</p>
</Fragment>
)
}
}
export default App
React還提供了Fragment的語法糖的寫法:
它看起來像空標簽
<> </>;
import React, { PureComponent, Fragment } from 'react'
export class App extends PureComponent {
render() {
return (
<>
<h2>我是標題</h2>
<p>我是內(nèi)容, 哈哈哈</p>
</>
)
}
}
export default App
但是，如果我們需要在Fragment中添加key，那么此時就不能使用語法糖, 必須完整的寫Fragment
export class App extends PureComponent {
constructor() {
super()
this.state = {
students: [
{name: "aaa", age: 18},
{name: "bbb", age: 19},
{name: "ccc", age: 20},
]
}
}
render() {
const { students } = this.state
return (
<>
<h2>我是標題</h2>
<p>我是內(nèi)容, 哈哈哈</p>
{
students.map(item => {
return(
// 綁定key時不能使用語法糖
<Fragment key={item.name}>
<h2>名稱: {item.name}</h2>
<h2>年齡: {item.age}</h2>
</Fragment>
)
})
}
</>
)
}
}
嚴格模式StrictMode
StrictMode 是一個用來突出顯示應(yīng)用程序中潛在問題的工具:
與 Fragment 一樣，StrictMode 不會渲染任何可見的 UI;
它的作用是為其后代元素觸發(fā)額外的檢查和警告, 檢查代碼中潛在的風(fēng)險;
嚴格模式檢查僅在開發(fā)模式下運行, 它們不會影響生產(chǎn)環(huán)境的構(gòu)建;
可以為應(yīng)用程序的任何部分啟用嚴格模式:
例如下面代碼中, 不會對 Header 和 Footer 組件運行嚴格模式檢查;
但是，ComponentOne 和 ComponentTwo 以及它們的所有后代元素都將進行檢查;
<Header/>
<StrictMode>
<div>
<ComponentOne/>
<ComponentTwo/>
</div>
</StrictMode>
<Footer/>
但是嚴格模式的檢測，到底檢測什么呢?
1.識別不安全的生命周期:
2.識別是否使用了過時的ref API
3.檢查是否產(chǎn)生意外的副作用
這個組件的constructor會被調(diào)用兩次;
這是嚴格模式下故意進行的操作，讓你來查看在這里寫的一些邏輯代碼被調(diào)用多次時，是否會產(chǎn)生一些副作用;
在生產(chǎn)環(huán)境中，是不會被調(diào)用兩次的;
4.檢查是否使用廢棄的findDOMNode方法
在之前的React API中，可以通過findDOMNode來獲取DOM，不過已經(jīng)不推薦使用了，可以自行學(xué)習(xí)演練一下
5.檢測是否使用過時的context API
早期的Context是通過static屬性聲明Context對象屬性，通過getChildContext返回Context對象等方式來使用Context的;
目前這種方式已經(jīng)不推薦使用，大家可以自行學(xué)習(xí)了解一下它的用法;
總結(jié)
到此這篇關(guān)于React組件化的一些額外知識點的文章就介紹到這了,更多相關(guān)React組件化知識點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了在ES6下React組件的寫法，其中包括定義React組件、聲明prop類型與默認prop、設(shè)置初始state、自動綁定，文中分別給出了詳細的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
React antd tabs切換造成子組件重復(fù)刷新
這篇文章主要介紹了React antd tabs切換造成子組件重復(fù)刷新,需要的朋友可以參考下2021-04-04
在 React 項目中使用 Auth0 并集成到后端服務(wù)的配置步驟詳解
這篇文章主要介紹了在 React 項目中使用 Auth0 并集成到后端服務(wù)的配置步驟詳解,通過本文詳細步驟,您可以將 Auth0 集成到 React 項目并與后端服務(wù)交互,需要的朋友可以參考下2024-07-07
React網(wǎng)絡(luò)請求發(fā)起方法詳細介紹
在編程開發(fā)中，網(wǎng)絡(luò)數(shù)據(jù)請求是必不可少的，這篇文章主要介紹了React網(wǎng)絡(luò)請求發(fā)起方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-09-09
這篇文章主要介紹了react移動端二級路由嵌套的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了react中使用ant組件庫的modal彈窗報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了React反向代理與CSS模塊化的使用案例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
React 作為當(dāng)下最為流行的前端開發(fā)框架之一，使用它可以快速構(gòu)建大型 Web 應(yīng)用，加上其出色的性能表現(xiàn)，使得眾多互聯(lián)網(wǎng)公司對它格外地青睞，這篇文章主要介紹了React運行機制2022-11-11
MUI是一款基于React的UI組件庫，可以方便地構(gòu)建美觀的用戶界面，使用MUI的DataTable組件和分頁器組件可以輕松實現(xiàn)用戶列表分頁功能，這篇文章使用MUI庫實現(xiàn)了用戶列表分頁功能，感興趣的同學(xué)可以參考下文2023-05-05