React:Facebook的開源框架

React的特點(diǎn)：

JSX語(yǔ)法(JavaScript XML)語(yǔ)法React可以讓我們用JS的語(yǔ)法書寫HTML

虛擬DOM（Virtual DOM）?虛擬DOM：顧名思義不是真正的DOM結(jié)構(gòu)，他不需要瀏覽器DOM API的支持 ，其實(shí)就是一個(gè)JS對(duì)象，該對(duì)象其實(shí)是在真實(shí)的DOM基礎(chǔ)上建立的一個(gè)抽象層，用來反應(yīng)真是的DOM結(jié)構(gòu)，當(dāng)頁(yè)面數(shù)據(jù)發(fā)生變化的時(shí)候，React會(huì)通過diff算法比較出刪一次虛擬DOM中的不同，僅僅將變化同步到真實(shí)的DOM中，提高瀏覽器的效率 3.組件化操作 4.操作靈活（React推崇 all in JS）

瀏覽器的渲染機(jī)制：

DOM樹：瀏覽器會(huì)將HTML代碼解析成DOM樹

CSS規(guī)則樹：瀏覽器會(huì)將CSS代碼解析成CSS規(guī)則樹

Render樹：將DOM樹和CSS規(guī)則樹合并成Render樹

規(guī)則（layout）：對(duì)Render樹的各個(gè)節(jié)點(diǎn)進(jìn)行布局，計(jì)算大小，位置等

繪制(paint)：根據(jù)計(jì)算出的規(guī)則，通過顯示將內(nèi)容繪制到屏幕上（最浪費(fèi)效率的） 其中4和5是最耗時(shí)的 6.重繪（reapint）:只改變頁(yè)面元素的顏色，字體樣式，只要不影響布局，但是影響風(fēng)格，瀏覽都會(huì)進(jìn)行重繪

React和Vue的比較：

數(shù)據(jù)是不可變的（immutable），數(shù)據(jù)流是單向的，如果想要修改react的數(shù)據(jù)，需要人為的觸發(fā)更新數(shù)據(jù)的代碼（setstate）才能讓react重新渲染視圖

通過JS來操作一切

class組件/函數(shù)組件的寫法

react很多東西都交給社區(qū)去做，而vue很多功能都是內(nèi)置的 React的路由（react-router-dom),狀態(tài)管理（redux)

React的使用：

使用react創(chuàng)建元素（虛擬DOM），將其插入到app中 語(yǔ)法格式：

React.createElement();

參數(shù)1：節(jié)點(diǎn)名參數(shù)2：節(jié)點(diǎn)的屬性參數(shù)3：節(jié)點(diǎn)的內(nèi)容返回值：新建的DOM節(jié)點(diǎn)（虛擬DOM）

例如：我想添加一個(gè)有一個(gè)標(biāo)簽h2 設(shè)置id為title 標(biāo)簽的內(nèi)容是hello react 步驟：

引入三個(gè)js

<!--? ? jsx-->

設(shè)置根標(biāo)簽：

寫js部分：

letapp = document.getElementById("app");letnewH2 =React.createElement("h2",{id:"title",className:"c1"},"Hello react");ReactDOM.render(newH2,app);

如果是jsx語(yǔ)法寫標(biāo)簽渲染的話：

//JSX語(yǔ)法需要在script中寫type="text/babel"letelement1 =

這是標(biāo)題標(biāo)簽百度一下

JSX語(yǔ)法

JSX語(yǔ)法的注意點(diǎn)：

JSX語(yǔ)法結(jié)構(gòu)可以被包裹在小括號(hào)里，小括號(hào)里也可以不謝

JSX里的注釋比較特殊（是一種新的形式）{/**/}

在JSX里可以通過{}嵌入表達(dá)式或者變量

如果JSX里的標(biāo)簽是單標(biāo)簽，注意啦，最后一定要以/結(jié)尾，不然會(huì)報(bào)錯(cuò)

JSX結(jié)構(gòu)有且只有一個(gè)根標(biāo)簽

React中列表的渲染： 建議使用map方法進(jìn)行遍歷數(shù)組以及返回想要渲染的jsx標(biāo)簽 react要求，列表渲染的時(shí)候需要設(shè)置key屬性給標(biāo)簽做唯一標(biāo)識(shí)，建議以后使用的數(shù)據(jù)集合中的某個(gè)兌現(xiàn)給的唯一值作為key（數(shù)字和字符串均可以） 栗子：

letcityArray = ["鄭州","杭州","廣州","蘭州","福州","鄂州","深圳"];ReactDom.render({? ?

? ? ? ? {? ? ? ? ? ? cityAarray.map((v,i)=>{? ? ? ? ? ? ? ? return
• 數(shù)組中的第{i+1}個(gè)城市是{v}
? ? ? ? ? ? })? ? ? ? ? ? ? ? ? ? }? ?

設(shè)置css樣式

第一種： 通過class給標(biāo)簽設(shè)置樣式 提前寫好class樣式 在標(biāo)簽渲染的時(shí)候給標(biāo)簽設(shè)置className=""

ReactDOM.render(

第二種： 通過style屬性的方法設(shè)置樣式 注意：在jsx語(yǔ)法中，給標(biāo)簽通過style設(shè)置樣式，需要注意的style的值不再是一個(gè)字符串，而是一個(gè)對(duì)象，且必須在react編譯環(huán)境中

letstyleObj = {? ? backgroundColor:"red",font-size:"22px",height:"100px",? ? textAlign:"center",}ReactDOM.render({? ?

? ? ? ? 列表1? ? ? ? 列表2? ?

React組件

組件就是將整個(gè)UI拆分成可以復(fù)用的代碼片段，并且對(duì)每個(gè)片段進(jìn)行獨(dú)立構(gòu)思

React中的組件，從概念上來講更像是js中的函數(shù)，其接收任意的參數(shù)（即"prop"）,并返回用于描述UI界面的React

React中創(chuàng)建組件的兩種方式：

函數(shù)式組件（寫法簡(jiǎn)單，但是不通用，沒辦法寫生命周期，想要更完整需要使用react-hook語(yǔ)法）

class式組件（通用） 栗子：

函數(shù)式組件：

functionWelcome(props){? ? return

welcome {props.name}

你好,{props.name}{props.age}
? ? ? ?

? ? ? ? ? ? {? ? ? ? ? ? ? ? props.array.map((v,i)=>{? ? ? ? ? ? ? ? return
• 數(shù)組中第{i+1}個(gè)城市是{v}? ? ? ? ? ? ? ?
? ? ? ? ? ? })}? ? ? ?

? ? ? ?

class式組件

class 本類名 extends 父類名{ 屬性--constructor--不需要手動(dòng)調(diào)用--創(chuàng)建對(duì)象 方法--就是普通的自定義方法methods } 一般寫法 class 組件名 extends React.Component{

} 也可以以下寫法：

let {Component} =React;classChild1extendsComponent{? ? ? render() {return(

? ? ? ? ? ? ?
• {this.props.name}
? ? ? ? ? ? ?
• {this.props.age}
? ? ? ? ? ? ?
• {this.props.sex}
? ? ? ? ?