react學習筆記——（一）
React構建使用者介面的JavaScript庫，主要用於構建UI介面。
特點：
1、宣告式的設計
2、高效，採用虛擬DOM來實現DOM的渲染，最大限度的減少DOM的操作。
3、靈活，跟其他庫靈活搭配使用。
4、JSX，俗稱JS裡面寫HTML，JavaScript語法的擴充套件。
5、元件化，模組化。程式碼容易複用，2016年之前大型專案非常喜歡react。
6、單向資料流。沒有實現資料的雙向繫結。資料-----檢視------事件-----資料
react官網
https://react.docschina.org/
建立專案
1、通過script引入使用，僅用於學習除錯使用
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
2、通過react的腳手架，建立專案進行開發，部署。
（1）安裝腳手架Creact React App.
cnpm install -g create-react -app
(2) 建立專案
create-react-app 01reactapp(專案名稱可以自定義)
建立專案是需要一些時間的，請耐心等待
React元素的渲染
leth2=<h2>helloworld</h2>;
使用JSX的寫法，可以建立JS元素物件
注意：JSX元素物件，或者元件物件，必須只有一個根元素（根節點）
例：
//實現頁面時刻的顯示
functionclock(){
// toLocaleTimeString()轉換時間
lettime=newDate().toLocaleTimeString()
letelement=(
<div>
<h1>現在的時間是{time}</h1>
<h2>這是副標題</h2>
</div>
)
// querySelector找到根節點
letroot=document.querySelector('#root');
ReactDOM.render(element,root)
}
clock()
//間隔函式 每隔一秒一變
setInterval(clock,1000)
函式式元件渲染
//父子元件通過props傳值
functionClock(props){ return( <div> <h1>現在的時間是{props.date.toLocaleTimeString()}</h1> <h2>這是函式式元件開發</h2> </div> ) } functionrun(){ ReactDOM.render( <Clockdate={newDate()}/>, document.querySelector('#root') ) } setInterval(run,1000)
React JSX
優點：
1、JSX執行更快，編譯為JavaScript程式碼時進行優化
2、型別更安全，編譯過程如果出錯就不能編譯，及時發現錯誤
3、JSX編寫模板更加簡單快速
注意：
1、JSX必須要有根節點。
2、正常的普通HTML元素要小寫。如果大寫預設是元件。
JSX表示式:
1、由HTML元素構成
2、中間如何需要插入變數用{}
3、{}中間可以使用表示式
4、{}中間表示式中可以使用JSX物件
5、屬性和html內容一樣都是用{}來插入內容
例子：
importReactfrom'react';
importReactDOMfrom'react-dom';
import'./App.css'
lettime=newDate().toLocaleTimeString()
letstr='當前時間是：'
letelement=(
<div>
<h1>helloworld</h1>
<h2>{str+time}</h2>
</div>
)
console.log(element)
letman='發熱';
letelement2=(
<div>
<h1>今天是否隔離</h1>
<h2>{man=="發熱"?<button>隔離</button>:"躺床上"}</h2>
</div>
)
//letman='發熱';
letelement4=(
<div>
<span>橫著躺</span>
<span>豎著躺</span>
</div>
)
man='正常'
letelement3=(
<div>
<h1>今天是否隔離</h1>
<h2>{man=="發熱"?<button>隔離</button>:element4}</h2>
</div>
)
letcolor='bgRed'
letlogo='https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png'
//HTML的樣式類名要寫className,因為class在js當中是關鍵詞
letelement5=(
<divclassName={color}>
<imgsrc={logo}/>
紅色的背景顏色
</div>
)
ReactDOM.render(
element5,
document.getElementById('root')
)
JSX_style 樣式
1、Class，style中，不可以存在多個class屬性（就是字面意思）
2、style樣式中，如果存在多個單詞的屬性組合，第二個單詞開始，首字母大寫。或者用引號引起來，否則會報錯。
letexampleStyle={
background:"skyblue",
borderBottom:"4pxsolidred",
'background-image':"url(https://www.baidu.com/img/pc_1c6e30772d5e4103103bd460913332f9.png)"
}
3、多個類共存的操作
letelement2=(
<div>
<h1className={"abc"+classStr}>helloworld</h1>
</div>
)
letclassStr2=['abc2','redBg2'].join("")
letelement3=(
<div>
{/*這裡寫註釋*/}
<h1className={classStr2}style={exampleStyle}>helloworld</h1>
</div>
)
4、註釋
必須在括號的表示式內書寫，否則報錯：{/*這裡寫註釋*/}
letclassStr2=['abc2','redBg2'].join("")
letelement3=(
<div>
{/*這裡寫註釋*/}
<h1className={classStr2}style={exampleStyle}>helloworld</h1>
</div>
)