读一读React源码(ReactDOM.render首次渲染过程)

 

详细过程:

 

reconcileChildren

diff算法的实现也是在reconcileChildFibers里面,Fibers Node就是vDom

 

最终调用原生appendChild和insertBefore方法完成渲染

 

Reconciliation

引用:https://reactjs.org/docs/reconciliation.html

React提供了声明式的API,让我们不用关注更新时到底哪些发生了变化。render方法会返回React元素的树(vDom树),当state,props变化时,render会返回新的React元素树(vDom树)。新旧VDom树之间,React会高效找出哪些发生了变化,从而针对变化的部分进行rerender。这个过程就是Reconcile,源码里面react-dom.js里面的带有reconcile的函数实现整个过程(reconcileChildFibers,reconcileChildren等)

 

React实现diffing算法的2种假设

1)元素类型不同,则新旧两个VDom树就不一样

2)暗示开发者根据key元素标识子元素在不同的renders中保持不变

注:在实践中,这些假设对于几乎所有实际用例都是有效的

diffing 算法

比较根元素的类型,两种情况:

1) 元素的类型不同

React直接剔除旧的树,并触发组件的componentWillUnmount()生命周期函数,新树渲染到dom中,并触发componentWillMount()和componentDidMount()

 

2) 元素的类型相同

比较同一个vDom的属性,对变化的属性进行更新,并且递归子元素,并且触发组件的componentWillReceiveProps()和componentWillUpdate()

 

keys

渲染列表时,给每个列表设置一个key来提高性能(列表顺序变化时)

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/2118
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注