2018python全棧爬蟲(chóng)高端自動(dòng)化課程大綱01課堂筆記02react技術(shù)

React是開(kāi)發(fā)并開(kāi)源的前端框架當(dāng)時(shí)他們的團(tuán)隊(duì)在市面上沒(méi)有找到合適的MVC框架，就自己寫(xiě)了一個(gè)Js框架，用來(lái)假設(shè)大名鼎鼎的（圖VirtualDOM（文檔對(duì)象模 ObjectDOMAPI來(lái)動(dòng)態(tài)的修改DOM結(jié)點(diǎn)，從而達(dá)到修改網(wǎng)頁(yè)的目的，這種修改是瀏覽器中完成，瀏覽器會(huì)根據(jù)DOM的改修改DOM重新渲染代價(jià)太高，前端框架為了提高效率，盡量減少DO的重繪，提出了VirtulDO，所有的修改都是現(xiàn)在VirtulDO上完成的，通過(guò)比較算法，找出瀏覽器DO之間的差異，使用這個(gè)差異操作DOReact實(shí)現(xiàn)了DOMDi?算法可以高效比對(duì)VirtualDOM和DOM的差異支持JSX語(yǔ) 替 importimportReactfromimportReactDomfrom'react-classRoot {render()return o}} 程序解importReactfrom

classRoot importReactDOMclassRoot

組件類定義， 渲染函數(shù)。返回組件中渲染的內(nèi)容。注意，只能返回唯一一個(gè)頂級(jí)元素span）returnreturnReact.createElement('div',null,etoimportimportReactfromimportReactDomfrom'react-classRoot {render()//return oreturnReact.createElement('div',null,eto}} importimportReactfromimportReactDomfrom'react-classSubEle{render()return<div>Sub}}classRoot {render(){return(<br<SubElee}}ReactDom.render(<Root 注意JSX

不能<br<br元素有嵌套，建議多行，注

，/前留一個(gè)空格JSX表達(dá)式：使用{}括起來(lái)，如果大括號(hào)內(nèi)使用了引號(hào)，會(huì)當(dāng)做字符串處理，例如里面的表達(dá)式成組件狀態(tài)state每一個(gè)React組件都有一個(gè)狀態(tài)變量stt，它是一個(gè)JvScip對(duì)象，可以為它定義屬性來(lái)保存值。如果狀態(tài)變化了，會(huì)觸發(fā)UI的重新渲染。使用stStt()方法可以修改stt值。importimportReactfromimportReactDomfrom'react-classRoot//定義一個(gè)對(duì)state=p1:p2:render(){this.state.p1='//ponent'//可以更新'});//不可以對(duì)還在更新中的state使用//Warning:setState(...):Cannotupdateduringanexistingstatetransition(suchas//Rendermethodsshouldbeapurefunctionofpropsandstate.return( eto<br}}}ReactDom.render(<Root this.state.p1=this.state.p1= setTimeout(()=>this.setState({p1: '}),可以使用延時(shí)函復(fù)雜狀態(tài)例

<scripttype="text/javascript">functiongetEventTrigger(event){x=event.target;// 中獲取元alert("觸發(fā)的元素的id是："+}<divid="t1"點(diǎn)擊這句話，會(huì)觸發(fā)一 ，并彈出一個(gè)警示i的id是t，鼠標(biāo)按下了一個(gè)函數(shù)，只要鼠標(biāo)按下就會(huì)觸發(fā)調(diào)用gEvetriggr函數(shù)，瀏覽器會(huì)送給它一個(gè)參數(shù)vet。vent是對(duì)象，當(dāng)觸發(fā)時(shí)，vet包含觸發(fā)這個(gè)的對(duì)象。HTMLDOM的屬此發(fā)生在何圖像的加載被中域的內(nèi)容被改當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的句當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的句某個(gè)鍵盤按鍵被某個(gè)鍵盤按鍵被按下并松某個(gè)鍵盤按鍵被鼠標(biāo)按鈕被按鼠標(biāo)被移鼠標(biāo)從某元素移鼠標(biāo)移到某元鼠標(biāo)按鍵被松重置按鈕被點(diǎn)窗口或框架被重新調(diào)整大文本被選確認(rèn)按鈕被點(diǎn)使用React實(shí)現(xiàn)上面的傳統(tǒng)的importimportReactfromimportReactDomfrom'react-classToggle{state{flag:true};//類中定義handleClick(event){console.log(event.target===this);thisthis.setState({flag:!this.state.flag}render(){/*注意一定要綁定thisonClick寫(xiě)成小駝峰return<divid="t1"點(diǎn)擊這句話，會(huì)觸發(fā)一 。}}classRoot//state={p1:'render(){ponent',p2:'.com'};//構(gòu)造函數(shù)中定義//this.state.p1='python.magedu';////this.setState({p1:'python.magedu'});//不可以對(duì)還在更新中的state使用//Warning:setState(...):Cannotupdateduringanexistingstatetransition(suchaswithinsetTimeout(()=>this.setState({p1:'python.magedu'}),//setInterval(()=>this.setState({p1:'python.magedu'}),5000);return( eto<br<Toggle}}ReactDom.render(<Root 分當(dāng)ender完成后，網(wǎng)頁(yè)上有一個(gè)i，i對(duì)象了一個(gè)click的處理函數(shù)，iv內(nèi)有文本內(nèi)容。如果通過(guò)點(diǎn)擊左鍵，就觸發(fā)了click方法關(guān)聯(lián)的hlClic函數(shù)，在這個(gè)函數(shù)里將狀態(tài)值改變。注意{this.handleClick.bind(this)}，不能外加this.handleClick.bind(this)一定要綁定this，否則當(dāng)觸發(fā)的函數(shù)時(shí)，this是函數(shù)執(zhí)行的上下文決定的，this經(jīng)不是觸發(fā)的對(duì)象了 取回的產(chǎn)生的對(duì)象的id，但是這不是我們封裝的組件對(duì)象。所以，cnslgev.agt==t)是fse。所以這里一定要用ts，而這個(gè)is是通過(guò)綁定來(lái)的。React使用小駝峰命不能使用 屬性props把React組件當(dāng)做使用，可以為其增加屬性，如<Toggle<Togglename="school"parent={this} 2 importReactfromimportReactDomfrom'react-classToggle {stateflag:true};//類中定statehandleClick(event){console.log(event.target===this);this.setState({flag:!this.state.flag}render(){/*注意一定要綁定thisonClick寫(xiě)成小駝峰return<divid="t1"點(diǎn)擊這句話，會(huì)觸發(fā)一個(gè)。{this.state.flag.toString()}<br/>顯示props<br{}:{ps.parent.state.p1+ps.parent.state.p2}<br}}classRoot ponent//定義一個(gè)對(duì)state={p1:' ',p2:'.com'};//構(gòu)造函數(shù)中定義staterender(){//this.state.p1='python.magedu';//可以修改屬性值//this.setState({p1:'python.magedu'});//不可以對(duì)還在更新中的state使用//Warning:setState(...):Cannotupdateduringanexistingstatetransition(suchaswithinsetTimeout(()=>this.setState({p1:'python.magedu'}),//setInterval(()=>this.setState({p1:'python.magedu'}),5000);return( eto<br<Togglename="school"parent={this}>{/*自定義2個(gè)屬性通過(guò)props傳給Toggle組件對(duì)象<hr/>{/*子元素通過(guò)props.children<span>我是Toggle元素的子元素</span>{/*子元素通過(guò)props.children}}}ReactDom.render(<Root TypeError:CannotassigntoreadTypeError:Cannotassigntoreadonlyproperty'name'ofobject異常importReactfromimportReactDomfrom'react-classToggle {constructor(props)super(props);//一定要調(diào)用super父類構(gòu)造器，否則this.state={flag:true};//類中定義}{console.log(event.target.id);console.log(event.target===this);this.setState({flag:!this.state.flag}render(){/*注意一定要綁定thisonClick寫(xiě)成小駝峰return<divid="t1"點(diǎn)擊這句話，會(huì)觸發(fā)一個(gè)。{this.state.flag.toString()}<br/>顯示props<br{}:{ps.parent.state.p1+ps.parent.state.p2}<br}}classRoot ponent//定義一個(gè)對(duì)constructor(props)super(props);//一定要調(diào)用super父類構(gòu)造器，否則this.state={p1: ',p2:'.com'};//構(gòu)造函數(shù)中定義}render()//this.state.p1='python.magedu';//可以修改屬性值//this.setState({p1:'python.magedu'});//不可以對(duì)還在更新中的state使用////Warning:setState(...):Cannotupdateduringanexistingstatetransition(suchassetTimeout(()=>this.setState({p1:'python.magedu'}),//setInterval(()=>this.setState({p1:'python.magedu'}),5000);return( eto<br<Togglename="school"parent={this}>{/*自定義2個(gè)屬性通過(guò)props傳給Toggle組件對(duì)象<hr/>{/*子元素通過(guò) <span>我是Toggle元素的子元素</span>{/*子元素通過(guò) }}ReactDom.render(<Root 組件的生命周期可分成三個(gè)狀態(tài)Mounting：已插入真實(shí)DOMUnmounting：已移出真實(shí)DOM在不同的生命周期狀態(tài)，就產(chǎn)生不同的方法。cWlt componentDidMount:在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對(duì)應(yīng)的DO以通過(guò)tis.tDON()來(lái)進(jìn)行。如果你想和其他JavScip框架一起使用，可以在這個(gè)方法中調(diào)用setTimeout,setInterval或者發(fā)送AJAX請(qǐng)求等操作(防止異部操作阻塞UI)。只在裝載完成后調(diào)用一次， render時(shí)不會(huì)被調(diào)ponentUpdate(nexProps,nextState)返回一個(gè)布爾值。在組件接收到新的props或者state時(shí)被調(diào)用。在初始化時(shí)或者使用 Updte時(shí)不被調(diào)用?？梢栽谀愦_認(rèn)不需要更新組 componentWllUpdte(nextProps,nextState)在組件接收到新的props或者state但還沒(méi)有render時(shí)被調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。compneDidUpde(rvPos,prvStt)在組件完成更新后立即調(diào)用。在初始化時(shí)不會(huì)被調(diào)用。卸載組件觸發(fā)componentWillUnmount在組件從DOM中移除的時(shí)候由圖觸 ，需要更新state或props因此，重新編寫(xiě)/src/index.js下面的例子添加是裝載、卸載組件的生命周importimportReactfromimportReactDomfrom'react-classSub {constructor(props)console.log('Subconstructor')super(props);//調(diào)用父類構(gòu)造器this.state={count:0};}handleClick(event)this.setState({count:this.state.count+1}render()console.log('Subreturn(<divid="sub"onClick={this.handleClick.bind(this)}>Sub'scount={this.state.count}}componentWillMount()//constructor之后，第一次render之前console.log('SubcomponentWillMount');}componentDidMount()//第一次renderconsole.log('Sub}componentWillUnmount()//清理工console.log('Sub}}classRoot {constructor(props)console.log('RootConstructor')super(props);//調(diào)用父類構(gòu)造器//定義一個(gè)對(duì)this.state=}{n<Sub}}ReactDom.render(<Root/>,.ge上面可以看到順constructorconstructor->componentWillMount->render->componentDidMount----state或props改變---->增加為了演示props的改變，為Root元素增加一個(gè)click處理函importReactfromimportReactDomfrom'react-classSub {constructor(props){console.log('Subconstructor')super(props);//調(diào)用父類構(gòu)造器this.state={count:0}handleClick(event)this.setState({count:this.state.count+1}render()console.log('Subreturn(<divstyle={{height:200+'px',color:'red',backgroundColor:'#f0f0f0'<aid="sub"onClick={this.handleClick.bind(this)}>Sub'scount={this.state.count}}componentWillMount()//constructor之后，第一次render之前console.log('SubcomponentWillMount');}componentDidMount()//第一次renderconsole.log('Sub}componentWillUnmount()//清理工console.log('Sub}componentWillReceiveProps(nextProps)//props變更時(shí)，接到新props了，交 ponentUpdate//props組件內(nèi)只讀，只能從外部改變console.log('SubcomponentWillReceiveProps',}ponentUpdate(nextProps,nextState)//是否組件更新，props或state方式改變時(shí)，返回布爾值，true才會(huì)更新 ponentUpdate',this.state.count,nextState);returntrue;//returnfalse將更新}componentWillUpdate(nextProps,nextState)//同意更新后，真正更新前，之后調(diào)用console.log('SubcomponentWillUpdate',this.state.count,}componentDidUpdate(prevProps,prevState)//同意更新后，真正更新后，在render之后調(diào)console.log('SubcomponentDidUpdate',this.state.count,}}classRoot {constructor(props)console.log('RootConstructor')super(props);//調(diào)用父