React Fragment介紹與使用

2021-10-04 02:21:37 字數 1774 閱讀 2256

在向 dom 樹批量新增元素時,乙個好的實踐是建立乙個document.createdocumentfragment,先將元素批量新增到

documentfragment 上,再把 documentfragment 新增到 dom 樹,減少了 dom操作次數的同時也不會建立乙個新元素。

和 documentfragment 類似,react 也存在 fragment 的概念,用途很類似。在 react 16之前,fragment 的建立是通過擴充套件包 react-addons-create-fragment 建立,而 react 16 中則通過 直接建立 『fragment』。

一種常見模式是元件返回乙個子元素列表。以此 react **片段為例:

class

table

extends

react.component

}

< columns /> 需要返回多個 元素以使渲染的 html 有效。如果在 < columns /> 的 render() 中使用了父 div,則生成的 html 將無效。

class

columns

extends

react.component

}

得到乙個 < table /> 輸出:

hello<

/td>

world<

/td>

<

/div>

<

/tr>

<

/table>

fragments 由此出現解決了這個問題。

react.fragment 元件能夠在不額外建立 dom 元素的情況下,讓 render() 方法中返回多個元素。乙個常見模式是乙個元件返回多個元素。fragments 允許你將子列表分組,而無需向 dom 新增額外節點。

理解起來就是在我們定義元件的時候return裡最外層包裹的div往往不想渲染到頁面,那麼就要用到我們的fragment元件了。就和vue的<

template >.

render()

你也可以使用其簡寫語法 <>。

render()

另外react 16開始, render支援返回陣列,知道這個特性的人不在少數。這一特性已經可以減少不必要節點巢狀。

import react from

'react'

;export

default

function()

與 <>區別

<> 語法不能接受鍵值或屬性,可以。

使用顯式 語法宣告的片段可能具有 key。乙個使用場景是將乙個集合對映到乙個 fragments 陣列 - 舉個例子,建立乙個描述列表:

function

glossary

(props)

>

<

/dt>

<

/dd>

<

/react.fragment>))

}<

/dl>);

}

key 是唯一可以傳遞給 fragment 的屬性。未來可能會新增對其他屬性的支援,例如事件。

python pyqt介紹 PyQt 介紹

pyqt 介紹 pyqt api是一組包含大量類和函式的模組。雖然qtcore模組包含用於處理檔案和目錄等的非gui功能,但qtgui模組包含所有圖形控制項。此外,還有用於處理xml qtxml svg qtsvg 和sql qtsql 等的模組。支援環境 pyqt與所有流行的作業系統相容,包括wi...

struts介紹(三) webwork介紹

1,與strust1的比較 1 相對比struts1,webwork有更多的表示層技術,比如 velocity freemarker和xslt 2 可以脫離web應用使用,aciton與servlet api 分離,execute方法甚至與webwork api分離。有自己的控制反轉容器。3 自定義...

xgboost簡單介紹 xgboost介紹

xgboost是華盛頓大學博士陳天奇創造的乙個梯度提公升 gradient boosting 的開源框架。至今可以算是各種資料比賽中的大殺器,被大家廣泛地運用。接下來,就簡單介紹一下xgboost和普通的gbdt相比,有什麼不同。何為gradient boosting,gbdt請看我上篇文章 1.梯...