2018python全栈爬虫高端自动化课程大纲01课堂笔记02react技术

React是开发并开源的前端框架当时他们的团队在市面上没有找到合适的MVC框架，就自己写了一个Js框架，用来假设大名鼎鼎的（图VirtualDOM（文档对象模 ObjectDOMAPI来动态的修改DOM结点，从而达到修改网页的目的，这种修改是浏览器中完成，浏览器会根据DOM的改修改DOM重新渲染代价太高，前端框架为了提高效率，尽量减少DO的重绘，提出了VirtulDO，所有的修改都是现在VirtulDO上完成的，通过比较算法，找出浏览器DO之间的差异，使用这个差异操作DOReact实现了DOMDiff算法可以高效比对VirtualDOM和DOM的差异支持JSX语 替 importimportReactfromimportReactDomfrom'react-classRoot {render()return o}} 程序解importReactfrom

classRoot importReactDOMclassRoot

组件类定义， 渲染函数。返回组件中渲染的内容。注意，只能返回唯一一个顶级元素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表达式：使用{}括起来，如果大括号内使用了引号，会当做字符串处理，例如里面的表达式成组件状态state每一个React组件都有一个状态变量stt，它是一个JvScip对象，可以为它定义属性来保存值。如果状态变化了，会触发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: '}),可以使用延时函复杂状态例

<scripttype="text/javascript">functiongetEventTrigger(event){x=event.target;// 中获取元alert("触发的元素的id是："+}<divid="t1"点击这句话，会触发一 ，并弹出一个警示i的id是t，鼠标按下了一个函数，只要鼠标按下就会触发调用gEvetriggr函数，浏览器会送给它一个参数vet。vent是对象，当触发时，vet包含触发这个的对象。HTMLDOM的属此发生在何图像的加载被中域的内容被改当用户点击某个对象时调用的句当用户双击某个对象时调用的句某个键盘按键被某个键盘按键被按下并松某个键盘按键被鼠标按钮被按鼠标被移鼠标从某元素移鼠标移到某元鼠标按键被松重置按钮被点窗口或框架被重新调整大文本被选确认按钮被点使用React实现上面的传统的importimportReactfromimportReactDomfrom'react-classToggle{state{flag:true};//类中定义handleClick(event){console.log(event.target===this);thisthis.setState({flag:!this.state.flag}render(){/*注意一定要绑定thisonClick写成小驼峰return<divid="t1"点击这句话，会触发一 。}}classRoot//state={p1:'render(){ponent',p2:'.com'};//构造函数中定义//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 分当ender完成后，网页上有一个i，i对象了一个click的处理函数，iv内有文本内容。如果通过点击左键，就触发了click方法关联的hlClic函数，在这个函数里将状态值改变。注意{this.handleClick.bind(this)}，不能外加this.handleClick.bind(this)一定要绑定this，否则当触发的函数时，this是函数执行的上下文决定的，this经不是触发的对象了 取回的产生的对象的id，但是这不是我们封装的组件对象。所以，cnslgev.agt==t)是fse。所以这里一定要用ts，而这个is是通过绑定来的。React使用小驼峰命不能使用 属性props把React组件当做使用，可以为其增加属性，如<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"点击这句话，会触发一个。{this.state.flag.toString()}<br/>显示props<br{}:{ps.parent.state.p1+ps.parent.state.p2}<br}}classRoot ponent//定义一个对state={p1:' ',p2:'.com'};//构造函数中定义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);//一定要调用super父类构造器，否则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"点击这句话，会触发一个。{this.state.flag.toString()}<br/>显示props<br{}:{ps.parent.state.p1+ps.parent.state.p2}<br}}classRoot ponent//定义一个对constructor(props)super(props);//一定要调用super父类构造器，否则this.state={p1: ',p2:'.com'};//构造函数中定义}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 组件的生命周期可分成三个状态Mounting：已插入真实DOMUnmounting：已移出真实DOM在不同的生命周期状态，就产生不同的方法。cWlt componentDidMount:在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DO以通过tis.tDON()来进行。如果你想和其他JavScip框架一起使用，可以在这个方法中调用setTimeout,setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。只在装载完成后调用一次， render时不会被调ponentUpdate(nexProps,nextState)返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用 Updte时不被调用。可以在你确认不需要更新组 componentWllUpdte(nextProps,nextState)在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。compneDidUpde(rvPos,prvStt)在组件完成更新后立即调用。在初始化时不会被调用。卸载组件触发componentWillUnmount在组件从DOM中移除的时候由图触 ，需要更新state或props因此，重新编写/src/index.js下面的例子添加是装载、卸载组件的生命周importimportReactfromimportReactDomfrom'react-classSub {constructor(props)console.log('Subconstructor')super(props);//调用父类构造器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);//调用父类构造器//定义一个对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);//调用父类构造器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组件内只读，只能从外部改变console.log('SubcomponentWillReceiveProps',}ponentUpdate(nextProps,nextState)//是否组件更新，props或state方式改变时，返回布尔值，true才会更新 ponentUpdate',this.state.count,nextState);returntrue;//returnfalse将更新}componentWillUpdate(nextProps,nextState)//同意更新后，真正更新前，之后调用console.log('SubcomponentWillUpdate',this.state.count,}componentDidUpdate(prevProps,prevState)//同意更新后，真正更新后，在render之后调console.log('SubcomponentDidUpdate',this.state.count,}}classRoot {constructor(props)console.log('RootConstructor')super(props);//调用父