New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nerv源码阅读简记 #10

Open

Bless-L opened this issue Feb 21, 2019 · 0 comments

Owner

Bless-L commented Feb 21, 2019

Nerv源码阅读简记

以下是Nerv.render执行后，会发生的事情

Nerv.render(组件，真实dom)后，mountVNode函数执行，createElement(组件)
（重点：Lifecycle.ts主要是组件更新的整个流程
如果是组件，执行组件的init方法（其它类型节点有其自己的处理方式），mountComponent执行。（打标1）
以下是挂载组件的流程
- 若父组件存在，记录
- componentWillMount函数执行，得到state
- renderComponent函数执行，执行component的render函数，得到虚拟dom
- 若存在componentDidMount函数，组件被推入readyComponents数组（该数组在flushMount函数中执行。具体为一个存放componentDidMount函数的队列，（子）组件全部被挂载后依次执行
- mountVNode函数执行，createElement(组件或者VNode)，挂载组件render函数执行后得到的虚拟dom
- 以上过程会进行递归，即会一层一层地执行下去，执行到子组件or子节点，即回到1
- 最后得到真实的dom，然后container.appendChild（真实dom）
- flushMount函数执行，callback执行
更新组件的流程
- 各种props，state，context的新旧记录
- shouldComponentUpdate、componentWillUpdate回调函数触发
- 若需要更新，得到渲染后的VNode、childContext，进行新旧VNode的diff
- 具体为patch函数执行，将其挂载到dom上
- componentDidUpdate回调触发
- flushMount函数执行，看是否有新的组件被挂载了，若有，执行componentDidMount

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment