Skip to content
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.

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

React 运行机制 #21

Open
nonocast opened this issue Mar 10, 2020 · 0 comments
Open

React 运行机制 #21

nonocast opened this issue Mar 10, 2020 · 0 comments

Comments

@nonocast
Copy link
Owner

@nonocast nonocast commented Mar 10, 2020

不谈具体源代码,尝试总结一下React运行机制,很多都是推理和猜测,仅供参考:

  • react事实上提供了一层UI抽象, 非常类似WPF的logical tree和visual tree,对应vdom和dom
  • App是React Component, 是React Element
  • 聚焦react, react-dom这两个package
  • react提供多种方式(class, function)组装和转换为React Element
  • react-dom负责从reactElement(vdom)渲染到落地的dom, element的create和render都是油react-dom负责
  • 整个render过程可以简单分为几步:
    • 根节点或者发生state变化的element起开始render, 当一个element render时他下属所有节点都会遍历收到render,除非should中明确告诉他我拒绝render
    • element的render生成vdom片段,然后和当前的vdom diff,最后进而生成dom
    • render中所写的JSX本身是一种syntax sugar(语法糖),其实质是react.createElement(这部分的转换由babel plugin完成),所以在动态时完全可以采用动态createElement的方式取代JSX
    • render不能有任何副作用 (Must not have side effect)

实践中:

  • 应该为每个使用 class 声明的组件添加 shouldComponentUpdate,否则一旦接受新的 props/state 就可能进行不必要的 re-render
  • 如果是array给定固定key

参考:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant
You can’t perform that action at this time.