初識?React?與?JSX
加載引入
????????-?基于瀏覽器?\<script\>?的模式
????????-?基于自動化的集成環(huán)境模式
基于瀏覽器?\<script\>?的模式
????????React.js?框架本身包含兩個(gè)部分
????????????????-?react.js：提供?React.js?核心功能代碼，如：虛擬?dom，組件
????????????????-?react-dom.js：提供了與瀏覽器交互的?DOM?功能，如：dom?渲染
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
</head>
<body>
????<div?id="app"></div>
????<script?src="./js/react.production.min.js"></script>
????<script?src="./js/react-dom.production.min.js"></script>
????<script?src="js/app.js"></script>
</body>
</html>
XSS
為了有效的防止?`XSS`?注入攻擊，`React?DOM`?會在渲染的時(shí)候把內(nèi)容（字符串）進(jìn)行轉(zhuǎn)義，所以字符串形式的標(biāo)簽是不會作為?`HTML`?標(biāo)簽進(jìn)行處理的
ReactDOM.render
????????ReactDOM.render(element,?container[,?callback])
????????????????element：要渲染的內(nèi)容
????????????????container：要渲染的內(nèi)容存放容器
????????????????callback：渲染后的回調(diào)函數(shù)
編程范式
????????就是編程的一種模式，比較流行的一些編程范式
????????????????-?命令式編程
????????????????-?聲明式編程
????????????????-?函數(shù)式編程
????????????????-?......
命令式編程
????????告訴計(jì)算機(jī)怎么做（How？）?-?過程
????????在前面的原生?WebComponent?中，我們?UI?的構(gòu)建是使用了命令式的編程方式來完成的
聲明式編程
????????告訴計(jì)算機(jī)我們要什么（What？）?-?結(jié)果
React.js?中的聲明式?UI
使用?JSX? ? ????????加載babel：語法轉(zhuǎn)換工具
引入JSX解析庫
babel-standalone.js：在瀏覽器中處理JSX
????????<script?src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
????????<script?type="text/babel"?src="js/app.js"></script>
>?注意：如果包含或引入的代碼中包含JSX，需要設(shè)置?`script`?標(biāo)簽的?`type`?屬性為：text/babel
? ??`JSX`?是一個(gè)基于?`JavaScript`?+?`XML`?的一個(gè)擴(kuò)展語法
????????-?它可以作為?`值`?使用
????????-?它并不是?`字符串`
????????-?它也不是?`HTML`
????????-?它可以配合?`JavaScript?表達(dá)式`?一起使用
DOM對象與?Virtual?DOM
????????DOM?對象
????????????????瀏覽器會把頁面中的元素映射為?JavaScript?中的對象，在?JavaScript?中通過對這些對象的訪問來獲取頁面中對應(yīng)元素及其內(nèi)容。
????????????????同時(shí)，對這些對象進(jìn)行某些操作，又會反饋到頁面中對應(yīng)的元素上面。
????????????????但是，原生?JavaScript?DOM?對象內(nèi)容和結(jié)構(gòu)太復(fù)雜，有很多的特性是我們平時(shí)很少用到的，而且我們對對象的操作會立即反饋
????????????????到頁面（渲染），影響性能
????????虛擬?DOM
????????????????virtual?DOM，參考原生?DOM?對象構(gòu)建的一個(gè)對象，它的結(jié)構(gòu)足夠簡單，同時(shí)優(yōu)化渲染邏輯，減少變化帶來的渲染性能影響
JSX語法規(guī)則
????????結(jié)構(gòu)
????????????????每一個(gè)獨(dú)立?`JSX`?結(jié)構(gòu)的頂層有且只能有一個(gè)頂級父元素
在JSX中嵌入表達(dá)式
????????在?`JXS`?中可以使用?<u>{表達(dá)式}</u>?嵌入`JavaScript`表達(dá)式
表達(dá)式：產(chǎn)生值的一組代碼的集合
????????-?變量
????????-?算術(shù)運(yùn)算
????????-?函數(shù)調(diào)用
????????-?……
JSX語法示例
????????在?`JSX`?中，表達(dá)式輸出的內(nèi)容類型與使用位置也有一些區(qū)別
JSX中的注釋
輸出數(shù)據(jù)類型
????????-?字符串、數(shù)字：原樣輸出
????????-?數(shù)組：轉(zhuǎn)成字符串，數(shù)組.join('')
??????????????????-?使用?空字符串?而不是默認(rèn)的?逗號?連接
????????-?其它對象不能直接輸出
????????-?布爾值、空、未定義?會被忽略
在屬性上使用?表達(dá)式
????????JSX?中的表達(dá)式也可以使用在屬性上，但是使用的時(shí)候需要注意
????????????????-?當(dāng)在屬性中使用?{????}?的時(shí)候，不要使用引號包含
JSX?更偏向?JavaScript，?所以對于一些特殊的屬性，使用的是?JavaScript?中的屬性名風(fēng)格
為了更加方法的操作元素的?style，針對?style?這個(gè)屬性有特殊的處理
????????這里的兩個(gè)?{{}}?，外部的大括號表示的是前面說的表達(dá)式語法中的大括號，里面的大括號是表示對象的大括號
列表渲染
????????如果需要渲染一組數(shù)據(jù)，我們可以通過遍歷（數(shù)組遍歷、對象變量……）等操作，返回一組?JSX
數(shù)據(jù)
數(shù)組
對象
key
????????默認(rèn)情況下，React?從性能上考慮，會盡可能的復(fù)用結(jié)構(gòu)，針對?同組可變列表?結(jié)構(gòu)，為了避免出現(xiàn)某些方面的問題，通常會給
????????每一個(gè)列表添加一個(gè)?唯一的?key
條件渲染
三元運(yùn)算符
與或運(yùn)算符
