

首页  思维导图  详情



React render

2018-03-11 18:38:02   0  举报





仅支持查看

AI智能生成

React 源码分析: React DOM.render调用后发生的过程

模版推荐

作者其他创作

大纲/内容

根据组件实例的<br>类型调用各自的<br>mountComponent<br>(初次渲染调用第一个)

<div>ReactCompositeComponent</div>mountComponent

_constructComponent

new Component

调用组件的constructor

performInitialMount

componentWillMount

merge state

_renderValidatedComponent

render

得到子组件实例, 调用不同类型的<div>mountComponent</div>

componentDidMount

ReactDOMComponent<br>mountComponent

对一些特殊标签,存储它们当前的<br>value以及捕获本地冒泡事件

处理标签属性、验证DOM嵌套等

document.createElement<br>创建当前元素

_updateDOMProperties

_createInitialChildren

mountChildren

_reconcilerInstantiateChildren

对所有子节点的element调用<br>instantiateReactComponent<br>实例化组件

调用各自组件的mountComponent

对于input、textarea等存在的状态属性存储状态<br>如autoFocus

ReactDOMTextComponent<br>mountComponent

document.createComment

DOMLazyTree.queueChild

ReactDOM.render

_renderNewRootComponent

instantiateReactComponent<br>

batchingStrategy.batchedUpdates

transaction.perform

closeAll

flushBatchedUpdates

method.call

initialize

 Collect

Get Started

render-tree

 Collect

Get Started

React前端组件架构图

 Collect

Get Started

react

 Collect

Get Started

react项目架构





0 条评论

下一页