第二章react168全家桶从入门到实战7节源码解析lesson

diff策略patchFiberflow手 ponent/render三个虚拟常见问题：reactvirtualdom是什么？说一下diffwhat？JavaScriptDOMJavaScript的对象结构。这个JavaScript对象称为virtualdom；传统domwhy？DOM操作很慢，轻微的操作都可能导致页面重新排版，非常耗性能。相对于DOM对象，s处理起来更快，而且更简单。通过dff算法对比新旧vdom之间的差异，可以批量的、最小化的执行m操作，从而提高性能。whee？eact中用JSX语法描述视图，通过babe-oader转译后它们变为React.ceateElement(...)形式，该函数将生成vdom来描述真实dm。将来如果状态变化，vdom将作出相应变化，再通过dff对比新老vdom区别从而做出最终dm操作。React提供的式API让开发者可以在对React的底层实现没有具体了解的情况下编写应用。在开发Reactprops

方法，会创建一棵由React元素组成的树。在下一次state或方断如何有效率的更新UI以保证当前UI与的树保持同步方这个算法问题有一些通用的解决方案，即生成将一棵树转换成另一棵树的最小操作数。然而，即使在最前沿的算法中，该算法的复杂程度为O(n3)，其中n是树中元素的数量。如果在React中使用了该算法，那么展示1000个元素所需要执行的计算量将在十亿的量级范围。这个开销实在是太过高昂。于是React在以下两个假设的基础之上提出了一套O(n)的启发式算法： prop来暗示哪些子元素在不同的渲染下能保持稳定diff同级比较，WebUI中DOM例如：div->p,CompA->CompB prop来暗示哪些子元素在不同的渲染下能保持稳定 对象安排一次更新。当state改变了，该组件就会重新渲染class组件的特点，就是拥有特殊状态并且可以通过setState更新状态并重新渲染视图，是React要的api。this.setState({counter:this.state.counter+1});this.setState({counter:this.state.counter+2});console.log("counter",this.state);this.setState({counter:this.state.counter+1},()=>{});this.setState(nextState=>{setStatesetState({foo:stState并没有直接操作去渲染，而是执行了一个异步的pdr队列我使用一类来门管理， ponent.jsexportletupdateQueue{updaters:[],isPending:false,add(updater){_.addItem(this.updaters,batchUpdate()if{}this.isPending=eachupdater.updatemayaddnewupdatertoupdateQueueclearthemwithaloopeventbubblesfrombottom-leveltotop-reversetheupdaterordercanmergesomepropsandstateandreducetherefreshtimesseeUpdater.updatemethodbelowtoknowlet{updaters}=thisletupdaterwhile(updater= }}}function{this.instance=this.pendingStates=[]this.pendingCallbacks=[]this.isPending=falsethis.nextProps=this.nextContext=nullthis.clearCallbacks=this.clearCallbacks.bind(this)}Utotypethis.nextProps=nextPropsthis.nextContext=nextContext//receivenextProps!!shouldupdateimmediaynextProps||!updateQueue.isPending :ponent()let{instance,pendingStates,nextProps,nextContext}=if(nextProps||pendingStates.length>0){nextProps=nextProps||psnextContext=nextContext||instance.contextthis.nextProps=this.nextContext=//mergethenextPropsandnextStateandupdatebyonetimeshouldUpdate(instance,nextProps,this.getState(),nextContext,}{if(nextState)_.addItem(this.pendingStates,nextState)if(!this.isPending){}}receState(nextState)let{pendingStates}=this//pushspecialparamstopointoutshouldrece_.addItem(pendingStates,getState()let{instance,pendingStates}=thislet{state,props}=instanceif{state=_.extend({},pendingStates.forEach(nextState{letisRece_.isArr(nextState)if(isRe{nextState=}if(_.isFn(nextState))nextState=nextState.call(instance,state,}//recestateif(isRece)state=_.extend({},}else_.extend(state,}returnclearCallbacks()let{pendingCallbacks,instance}=thisif(pendingCallbacks.length>0){this.pendingCallbacks=pendingCallbacks.forEach(callback=>}addCallback(callback)if(_.isFn(callback))_.addItem(this.pendingCallbacks,}}}React在开始重新渲染之前，React会有意地进行“等待”，直到所有在组件的处理函数内调用的setInterval、addEventListener原生绑定不会通过合成的方式处理，自然也不会进入更新事务的处理流程。setTimeout也一样，在setTimeout回调执行时已经完成了原更新组件流程，也不会再进入异步更新流程，其结果自然就是是同步的了。ponent负责合并pendingStates中所有state变成一个exportexportfunctioncompareTwoVnodes(vnode,newVnode,node,{letnewNode=nodeif(newVnode==null){//remove}}elseif(vnode.type!==newVnode.type||vnode.key!==newVnode.key)//re }elseif(vnode!==newVnode||parentContext)//sametypeandsamekey->newNode=updateVnode(vnode,newVnode,node,}return}functionfunctionupdateVnode(vnode,newVnode,node,{let{vtype}=if(vtype===VCOMPONENT) ponent(vnode,newVnode,node,}if(vtype=== ESS)return ess(vnode,newVnode,node,}//ignoreVCOMMENTandothervtypesif(vtype!==VELEMENT){return}letoldHtml=ps[HTML_KEY]&&ps[HTML_KEY].htmlif(oldHtml!=null){//设置了innerHTML时先更新当前元素在初始化initVchildren(newVnode,node,parentContext)}else//正常更新：先更新子元素，在更新当前元素updateVelem(vnode,newVnode,node,parentContext)}return}functionfunctionupdateVelem(velem,newVelem,node) ponent=velem.type.indexOf('-')>=0||ps.is_.patchProps(node,ps,newVps, returnnode}//更新children，产出三个patchletpatches{updates:creates:}diffVchildren(patches,vnode,newVnode,node,_.flatEach(patches.removes,_.flatEach(patches.updates,_.flatEach(patches.creates,请谨记协调算法是一个实现细节。React可以在每个action之后对整个应用进行重新渲染，得到的最终 方法，这不代表React会卸载或装载它们。React只会基于以上提到的规则来决定如何进行差异的合并。由于该算法不会尝试匹配不同组件类型的子树。如果你发现你在两种不同类型的组件中切换，但输出非常相似的内容，建议把它们改成同一类型。在实践中，我们没有遇到这类问题。生成的）DOM节点被不必要地重新创建，这可能导致性能下降和子组件中flow是一个针对JavaScript代码的静态类型检测器。Flow由 开发，经常与React一起使用。flow通过特殊的类型语法为变量、函数、以及React组件提供注解，帮助你尽早地发现错误。你可以阅读introductiontoFlow来了解它的基础知识。React将flow引入源码，用于类型检查。在证头部的注释中，标记为

'typescanonlybeusedinatsfile8010，在扩展中找到TypeScript，配置"javascript.validate.enable":false。React实现一个合成，这与渲染器无关，它适用于ReactDOM和ReactNative。源码hooks介绍：ReactTodayandimportimportReact,{useState,useEffect}fromp(props)const[data,setData]=function{)}useEffect((){return(){}return<inputvalue={data}onChange={handleChange})const[state1,setState1]=useState(1)const[state2,setState2]=useState(2)const[state3,setState3]=useState(3)}hook1=>Fiber.memoizedStatehook1.next=>hook2hook2.next=>hook3state3===ReactConf2017Fiber介绍