JSX 是 javascript 的語法擴(kuò)展。它就像一個擁有 javascript 全部功能的模板語言蔗坯。它生成 React 元素琼稻,這些元素將在 DOM 中呈現(xiàn)。
React 建議在組件使用 JSX商膊。在 JSX 中伏伐,我們結(jié)合了 javascript 和 HTML,并生成了可以在 DOM 中呈現(xiàn)的 react 元素晕拆。
1. 定義虛擬 dom 時不要用引號
2.標(biāo)簽中引入 js 表達(dá)式要用 {}
3.如果在 jsx 要寫行內(nèi)樣式需要使用 style={{coler:red}} 形式
4.樣式的類名指定不能寫 class藐翎,要寫 className;
5.只有一個根標(biāo)簽
6.標(biāo)簽必須閉合
7.標(biāo)簽首字母
①若小寫字母開頭,則會將該標(biāo)簽轉(zhuǎn)為 html 同名標(biāo)簽,如果沒找到吝镣,則會報錯堤器;
②若大寫字母開頭,則會認(rèn)為是組件赤惊,它就會去找對應(yīng)的組件吼旧,如果沒找到,就會報組件未定義的錯誤未舟;
實(shí)質(zhì):JSX 通過 babel 編譯圈暗,而 babel 實(shí)際上把 JSX 編譯給 React.createElement() 調(diào)用
React.createElement()即 h 函數(shù),返回 vnode第一個參數(shù)可能是組件也可能是
html —tag 裕膀,如果是組件员串,首字母必須大寫
const imgElem = <div>
? ? <p>some text</p>
? ? <img src={imgUrl} /> </div>
? ? // 經(jīng)過 babel 編譯后
? ? var imgElem = React. createElement ("div",null,React.createElement("p",null,"some text"),React.createElement("img",{src:imgUrl}));