React中的jsx
阿新 • • 發佈:2020-12-16
JSX 是一個看起來很像 XML 的 JavaScript 語法擴充套件
React 使用 JSX 來替代常規的 JavaScript。
在react中.js字尾與.jsx沒有區別,react中使用的模板語言是jsx,但模板語言的本質仍然是js程式碼
在React的元件中,只有引入了React的模組才能正確識別JSX
程式碼,因為不是合法的js語法,不借助‘外力’是不能夠唄瀏覽器識別的
import React from 'react';
在jsx中標籤的class屬性由className代替
<div className="index">Hello world.</div>
在jsx中處理邏輯程式碼要放在{}中
陣列在jsx中會被自動展開
為什麼要使用虛擬DOM
DOM操作是一件成本很高的事情
DOM操作都伴隨著大量的計算,也正因為這樣,當頁面需要的操作不斷變得複雜,每一次操作需要改動的元素變得更多時,瀏覽器的壓力也會越來越大。.
正常情況下,我們操作是直接改動html元素。每一次操作都會給瀏覽器增加更多的壓力。而虛擬DOM可以幫我們收集短時間來的多次改動,彙總成為一次改動。這樣對於瀏覽器來說,壓力就減少了很多。如圖。