1. 程式人生 > 實用技巧 >React中的jsx

React中的jsx

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可以幫我們收集短時間來的多次改動,彙總成為一次改動。這樣對於瀏覽器來說,壓力就減少了很多。如圖。