第React組件化的一些額外知識點補充目錄React的額外補充Portals的使用Fragment的使用嚴(yán)格模式StrictMode總結(jié)

React的額外補充

Portals的使用

某些情況下，我們希望渲染的內(nèi)容獨立于父組件，甚至是獨立于當(dāng)前掛載到的DOM元素中(默認(rèn)都是掛載到id為root的DOM元素上的)。

Portal提供了一種將子節(jié)點渲染到存在于父組件以外的DOM節(jié)點的優(yōu)秀的方案:

第一個參數(shù)(child)是任何可渲染的React子元素，例如一個元素，字符串或fragment;

第二個參數(shù)(container)是一個DOM元素;

import{createPortal}from'react-dom'

exportclassAppextendsPureComponent{

render(){

return(

divclassName='app'

h2Apph1/h2

{createPortal(h2Apph2/h2,document.querySelector('#abc'))}

/div

通常來講，當(dāng)你從組件的render方法返回一個元素時，該元素將被掛載到DOM節(jié)點中離其最近的父節(jié)點:

然而，有時候?qū)⒆釉夭迦氲紻OM節(jié)點中的不同位置也是有好處的:

比如說，我們準(zhǔn)備開發(fā)一個Modal組件，它可以將它的子組件渲染到一個單獨的節(jié)點,這個節(jié)點在屏幕的中間位置:

步驟一:修改index.html添加新的節(jié)點

divid="root"/div

divid="abc"/div

!--添加新節(jié)點--

divid="modal"/div

步驟二:編寫這個節(jié)點的樣式

#modal{

position:fixed;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background-color:skyblue;

步驟三:編寫組件代碼,將組件中傳遞過來的元素渲染到modal節(jié)點上

exportclassModalextendsPureComponent{

render(){

returncreatePortal(ps.children,document.querySelector("#modal"))

步驟四:在根組件App中使用Modal組件并且向Modal組件中傳遞一些元素

exportclassAppextendsPureComponent{

render(){

return(

divclassName='app'

Modal

h2Modal的標(biāo)題/h2

pModal的內(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;

importReact,{PureComponent,Fragment}from'react'

exportclassAppextendsPureComponent{

render(){

return(

Fragment

h2我是標(biāo)題/h2

p我是內(nèi)容,哈哈哈/p

/Fragment

exportdefaultApp

React還提供了Fragment的語法糖的寫法:

它看起來像空標(biāo)簽/;

importReact,{PureComponent,Fragment}from'react'

exportclassAppextendsPureComponent{

render(){

return(

h2我是標(biāo)題/h2

p我是內(nèi)容,哈哈哈/p

exportdefaultApp

但是，如果我們需要在Fragment中添加key，那么此時就不能使用語法糖,必須完整的寫Fragment

exportclassAppextendsPureComponent{

constructor(){

super()

this.state={

students:[

{name:"aaa",age:18},

{name:"bbb",age:19},

{name:"ccc",age:20},

render(){

const{students}=this.state

return(

h2我是標(biāo)題/h2

p我是內(nèi)容,哈哈哈/p

students.map(item={

return(

//綁定key時不能使用語法糖

Fragmentkey={}

h2名稱:{}/h2

h2年齡:{item.age}/h2

/Fragment

嚴(yán)格模式StrictMode

StrictMode是一個用來突出顯示應(yīng)用程序中潛在問題的工具:

與Fragment一樣，StrictMode不會渲染任何可見的UI;

它的作用是為其后代元素觸發(fā)額外的檢查和警告,檢查代碼中潛在的風(fēng)險;

嚴(yán)格模式檢查僅在開發(fā)模式下運行,它們不會影響生產(chǎn)環(huán)境的構(gòu)建;

可以為應(yīng)用程序的任何部分啟用嚴(yán)格模式:

例如下面代碼中,不會對Header和Footer組件運行嚴(yán)格模式檢查;

但是，ComponentOne和ComponentTwo以及它們的所有后代元素都將進(jìn)行檢查;

Header/

StrictMode

div

ComponentOne/

ComponentTwo/

/div

/StrictMode

Footer/

但是嚴(yán)格模式的檢測，到底檢測什么呢

1.識別不安全的生命周期:

2.識別是否使用了過時的refAPI

3.檢查是否產(chǎn)生意外的副作用

這個組件的constructor會被調(diào)用兩次;

這是嚴(yán)格模式下故意進(jìn)行的操作，讓你來查看在這里寫的一些邏輯代碼被調(diào)用多次時，是否會產(chǎn)生一些副作用;

在生產(chǎn)環(huán)境中，是不會被調(diào)用兩次的;

4.檢查是否使用廢棄的findDOMNode方法

在之前的ReactAPI中，可以通過findDOMNode來獲取DOM，不過已經(jīng)不推薦使用了