React組件化的一些額外知識點(diǎn)補(bǔ)充

更新時(shí)間：2022年10月10日 09:55:45 作者：林有酒

React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于React組件化的一些額外知識點(diǎn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

React的額外補(bǔ)充

Portals的使用

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

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

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

第二個(gè)參數(shù)(container)是一個(gè) 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 方法返回一個(gè)元素時(shí)，該元素將被掛載到 DOM 節(jié)點(diǎn)中離其最近的父節(jié)點(diǎn):

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

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

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

<div id="root"></div>
<div id="abc"></div>
<!-- 添加新節(jié)點(diǎn) -->
<div id="modal"></div>

步驟二:編寫這個(gè)節(jié)點(diǎn)的樣式

#modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: skyblue;
}

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

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的標(biāo)題</h2>
          <p>Modal的內(nèi)容</p>
        </Modal>
      </div>
    )
  }
}

這樣傳遞給Modal組件的元素就會(huì)被單獨(dú)渲染到modal節(jié)點(diǎn)上, 且該節(jié)點(diǎn)會(huì)顯示在屏幕的正中央

Fragment的使用

在之前的開發(fā)中，我們總是在一個(gè)組件中返回內(nèi)容時(shí)包裹一個(gè)div元素:

我們又希望可以不渲染這樣一個(gè)div應(yīng)該如何操作呢?

這個(gè)時(shí)候就可以使用Fragment, 使用Fragment需要先導(dǎo)入Fragment在react包下

Fragment 允許你將子列表分組，而不會(huì)渲染到頁面中, 類似于Vue中的template和小程序當(dāng)中的block;

import React, { PureComponent, Fragment } from 'react'

export class App extends PureComponent {
  render() {
    return (
      <Fragment>
        <h2>我是標(biāo)題</h2>
        <p>我是內(nèi)容, 哈哈哈</p>
      </Fragment>
    )
  }
}

export default App

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

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

import React, { PureComponent, Fragment } from 'react'

export class App extends PureComponent {
  render() {
    return (
      <>
        <h2>我是標(biāo)題</h2>
        <p>我是內(nèi)容, 哈哈哈</p>
      </>
    )
  }
}

export default App

但是，如果我們需要在Fragment中添加key，那么此時(shí)就不能使用語法糖, 必須完整的寫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>我是標(biāo)題</h2>
        <p>我是內(nèi)容, 哈哈哈</p>

        {
          students.map(item => {
            return(
              // 綁定key時(shí)不能使用語法糖
              <Fragment key={item.name}>
                <h2>名稱: {item.name}</h2>
                <h2>年齡: {item.age}</h2>
              </Fragment>
            )
          })
        }
      </>
    )
  }
}

嚴(yán)格模式StrictMode

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

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

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

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

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

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

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

<Header/>
  <StrictMode>
    <div>
      <ComponentOne/>
      <ComponentTwo/>
    </div>
  </StrictMode>
<Footer/>

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

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

2.識別是否使用了過時(shí)的ref API

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

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

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

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

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