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

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

classRoot importReactDOMclassRoot

組件類定義， 渲染函數(shù)。返回組件中渲染的內(nèi)容。注意，只能返回唯一一個頂級元素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元素有嵌套，建議多行，注

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

<scripttype="text/javascript">functiongetEventTrigger(event){x=event.target;// 中獲取元alert("觸發(fā)的元素的id是："+}<divid="t1"點(diǎn)擊這句話，會觸發(fā)一 ，并彈出一個警示i的id是t，鼠標(biāo)按下了一個函數(shù)，只要鼠標(biāo)按下就會觸發(fā)調(diào)用gEvetriggr函數(shù)，瀏覽器會送給它一個參數(shù)vet。vent是對象，當(dāng)觸發(fā)時，vet包含觸發(fā)這個的對象。HTMLDOM的屬此發(fā)生在何圖像的加載被中域的內(nèi)容被改當(dāng)用戶點(diǎn)擊某個對象時調(diào)用的句當(dāng)用戶雙擊某個對象時調(diào)用的句某個鍵盤按鍵被某個鍵盤按鍵被按下并松某個鍵盤按鍵被鼠標(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寫成小駝峰return<divid="t1"點(diǎn)擊這句話，會觸發(fā)一 。}}classRoot//state={p1:'render(){ponent',p2:'.com'};//構(gòu)造函數(shù)中定義//this.state.p1='python.magedu';////this.setState({p1:'python.magedu'});//不可以對還在更新中的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)頁上有一個i，i對象了一個click的處理函數(shù)，iv內(nèi)有文本內(nèi)容。如果通過點(diǎn)擊左鍵，就觸發(fā)了click方法關(guān)聯(lián)的hlClic函數(shù)，在這個函數(shù)里將狀態(tài)值改變。注意{this.handleClick.bind(this)}，不能外加this.handleClick.bind(this)一定要綁定this，否則當(dāng)觸發(fā)的函數(shù)時，this是函數(shù)執(zhí)行的上下文決定的，this經(jīng)不是觸發(fā)的對象了 取回的產(chǎn)生的對象的id，但是這不是我們封裝的組件對象。所以，cnslgev.agt==t)是fse。所以這里一定要用ts，而這個is是通過綁定來的。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寫成小駝峰return<divid="t1"點(diǎn)擊這句話，會觸發(fā)一個。{this.state.flag.toString()}<br/>顯示props<br{}:{ps.parent.state.p1+ps.parent.state.p2}<br}}classRoot ponent//定義一個對state={p1:' ',p2:'.com'};//構(gòu)造函數(shù)中定義staterender(){//this.state.p1='python.magedu';//可以修改屬性值//this.setState({p1:'python.magedu'});//不可以對還在更新中的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個屬性通過props傳給Toggle組件對象<hr/>{/*子元素通過props.children<span>我是Toggle元素的子元素</span>{/*子元素通過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寫成小駝峰return<divid="t1"點(diǎn)擊這句話，會觸發(fā)一個。{this.state.flag.toString()}<br/>顯示props<br{}:{ps.parent.state.p1+ps.parent.state.p2}<br}}classRoot ponent//定義一個對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'});//不可以對還在更新中的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個屬性通過props傳給Toggle組件對象<hr/>{/*子元素通過 <span>我是Toggle元素的子元素</span>{/*子元素通過 }}ReactDom.render(<Root 組件的生命周期可分成三個狀態(tài)Mounting：已插入真實(shí)DOMUnmounting：已移出真實(shí)DOM在不同的生命周期狀態(tài)，就產(chǎn)生不同的方法。cWlt componentDidMount:在第一次渲染后調(diào)用，只在客戶端。之后組件已經(jīng)生成了對應(yīng)的DO以通過tis.tDON()來進(jìn)行。如果你想和其他JavScip框架一起使用，可以在這個方法中調(diào)用setTimeout,setInterval或者發(fā)送AJAX請求等操作(防止異部操作阻塞UI)。只在裝載完成后調(diào)用一次， render時不會被調(diào)ponentUpdate(nexProps,nextState)返回一個布爾值。在組件接收到新的props或者state時被調(diào)用。在初始化時或者使用 Updte時不被調(diào)用。可以在你確認(rèn)不需要更新組 componentWllUpdte(nextProps,nextState)在組件接收到新的props或者state但還沒有render時被調(diào)用。在初始化時不會被調(diào)用。compneDidUpde(rvPos,prvStt)在組件完成更新后立即調(diào)用。在初始化時不會被調(diào)用。卸載組件觸發(fā)componentWillUnmount在組件從DOM中移除的時候由圖觸 ，需要更新state或props因此，重新編寫/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)造器//定義一個對this.state=}{n<Sub}}ReactDom.render(<Root/>,.ge上面可以看到順constructorconstructor->componentWillMount->render->componentDidMount----state或props改變---->增加為了演示props的改變，為Root元素增加一個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變更時，接到新props了，交 ponentUpdate//props組件內(nèi)只讀，只能從外部改變console.log('SubcomponentWillReceiveProps',}ponentUpdate(nextProps,nextState)//是否組件更新，props或state方式改變時，返回布爾值，true才會更新 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)用父