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(源码分析) #1
Comments
赞一个,问个问题:
为啥通过这个条件就能判断出不是state而已props更新呢?这个条件的意思好像是说父节点发生变化了,但是父节点发生变化也不能说明props有更新啊;我是reactjs新手,请解答一下,谢谢 |
@tomwang1013 this.setState调用的情况下,prevParentElement是等于nextParentElement的,只是state变化了,props没变。如果props变化后(例如通过父节点的改变props), 会重新生成个nextParentElement对象 |
看来楼主意见熟悉过了react的源码,想问一下,本人会使用react开发项目,最近想阅读源码确无从下手,有好的建议吗? |
图貌似有问题~ |
@dushao103500 拉下代码,跑起来慢慢调试... |
@shouhe 哪里? |
react Diff算法那张图我只能看一半 |
问一下,react源码怎么将jsx语法(比如'< div>hello</ div>')转换成虚拟dom(比如{ type: 'div', props: {}, chidlren:[] .....}),听介绍说是使用解析html的工具,但在react源码中并未找到相关代码,大神求解! |
@dushao103500 这个不是react做的,babel实现的 |
原文链接
理解ReactElement和ReactClass的概念
首先让我们理解两个概念:
ReactElement
一个描述DOM节点或component实例的字面级对象。它包含一些信息,包括组件类型
type
和属性props
。就像一个描述DOM节点的元素(虚拟节点)。它们可以被创建通过React.createElement
方法或jsx
写法分为
DOM Element
和Component Elements
两类:当节点的type属性为字符串时,它代表是普通的节点,如
div,span
当节点的type属性为一个函数或一个类时,它代表自定义的节点
ReactClass
ReactClass是平时我们写的Component组件(类或函数),例如上面的
Button
类。ReactClass实例化后调用render方法可返回DOM Element
。react渲染过程
过程理解:
React.render
方法,将我们的element
根虚拟节点渲染到container
元素中。element
可以是一个字符串文本元素,也可以是如上介绍的ReactElement
(分为DOM Elements, Component Elements)。element
的类型不同,分别实例化ReactDOMTextComponent
,ReactDOMComponent
,ReactCompositeComponent
类。这些类用来管理ReactElement
,负责将不同的ReactElement
转化成DOM(mountComponent方法),负责更新DOM(receiveComponent方法,updateComponent方法, 如下会介绍)等。ReactCompositeComponent
实例调用mountComponent
方法后内部调用render
方法,返回了DOM Elements
。再对如图的步骤2️⃣递归。react更新机制
每个类型的元素都要处理好自己的更新:
第一步:调用this.setState
第二步:调用内部receiveComponent方法
这里主要分三种情况,文本元素,基本元素,自定义元素。
自定义元素:
receiveComponent方法源码
updateComponent方法源码
内部_performComponentUpdate方法源码
shouldUpdateReactComponent函数源码
文本元素:
receiveComponent方法源码
基本元素:
receiveComponent方法源码
updateComponent方法源码
this._updateDOMChildren
方法内部调用diff算法,请看下一节........react Diff算法
diff算法源码
react的优点与总结
优点
总结
想要更好的利用react的虚拟DOM,diff算法的优势,我们需要正确的优化、组织react页面。例如将一个页面render的
ReactElement
节点分解成多个组件。在需要优化的组件手动添加shouldComponentUpdate
来避免不需要的re-render
。The text was updated successfully, but these errors were encountered: