React組件化的一些額外知識點補充
React的額外補充
Portals的使用
某些情況下，我們希望渲染的內(nèi)容獨立于父組件，甚至是獨立于當前掛載到的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>
)
}
}
通常來講，當你從組件的 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應該如何操作呢?
這個時候就可以使用Fragment, 使用Fragment需要先導入Fragment在react包下
Fragment 允許你將子列表分組，而不會渲染到頁面中, 類似于Vue中的template和小程序當中的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 是一個用來突出顯示應用程序中潛在問題的工具:
與 Fragment 一樣，StrictMode 不會渲染任何可見的 UI;
它的作用是為其后代元素觸發(fā)額外的檢查和警告, 檢查代碼中潛在的風險;
嚴格模式檢查僅在開發(fā)模式下運行, 它們不會影響生產(chǎn)環(huán)境的構建;
可以為應用程序的任何部分啟用嚴格模式:
例如下面代碼中, 不會對 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)不推薦使用了，可以自行學習演練一下
5.檢測是否使用過時的context API
早期的Context是通過static屬性聲明Context對象屬性，通過getChildContext返回Context對象等方式來使用Context的;
目前這種方式已經(jīng)不推薦使用，大家可以自行學習了解一下它的用法;
總結(jié)
到此這篇關于React組件化的一些額外知識點的文章就介紹到這了,更多相關React組件化知識點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家介紹了JS跨域解決方案react配置反向代理的示例內(nèi)容詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2021-11-11
這篇文章主要介紹了react?diff?算法實現(xiàn)思路及原理解析,本節(jié)我們正式進入基本面試必考的核心地帶?--?diff?算法，了解如何優(yōu)化和復用?dom?操作的，還有我們常見的?key?的作用,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了React為 Vue 引入容器組件和展示組件的教程詳解，文中很詳細的給大家介紹了使用容器組件的原因,需要的朋友可以參考下2018-05-05
render props是指一種在 React 組件之間使用一個值為函數(shù)的 prop 共享代碼的技術。簡單來說，給一個組件傳入一個prop，這個props是一個函數(shù)，函數(shù)的作用是用來告訴這個組件需要渲染什么內(nèi)容，那么這個prop就成為render prop2023-01-01
這篇文章主要介紹了如何基于react實現(xiàn)下拉刷新效果,在下拉的時候會進入loading狀態(tài),文中有詳細的代碼示例供大家參考,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-03-03
react如何實現(xiàn)側(cè)邊欄聯(lián)動頭部導航欄效果
這篇文章主要介紹了react如何實現(xiàn)側(cè)邊欄聯(lián)動頭部導航欄效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了react native 獲取地理位置的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
react中關于Context/Provider/Consumer傳參的使用
這篇文章主要介紹了react中關于Context/Provider/Consumer傳參的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了React?Fiber?樹思想解決業(yè)務實際場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
React是現(xiàn)在前端使用頻率最高的三大框架之一，React率先提出虛擬DOM的思想和實現(xiàn)，使其保持有良好的性能。本篇文章將對React組件化的入門學習進行講解，同時針對模塊化的思想進行概述，為接下來組件化開發(fā)的文章進行知識儲備2022-09-09