- addons:工具方法插件:
PureRenderMixin
、CSSTransitionGrouo
、Fragment
、LinkedStateMixin
。 - isomorphic:包含一系列同构方法。
- shared:公用方法和常用方法。
- test:测试方法。
- core/tests:边界错误的测试用例。
- renderers:React的核心代码,包含大部分功能实现,因此进行单独分析。
- dom:包含client,server和shared。
- client:包含DOM操作方法(findDOMNode,setInnerHTML,setTextContent等)以及事件方法。这里的事件方法主要是一些非底层的实用性事件方法,
如事件监听(ReactEventListener)、常用事件方法(TapEventPlugin、EnterLeaveEventPlugin)以及一些合成事件(SyntheticEvents
等)。 - server:主要包含服务端渲染的实现和方法(如 ReactServerRendering、ReactServerRenderingTransaction
等)。 - shared:包含文本组件(ReactDOMTextComponent)、标签组件(ReactDOMComponent)、
DOM 属性操作(DOMProperty、DOMPropertyOperations)、CSS 属性操作(CSSProperty、
CSSPropertyOperations)等。
- shared:包含event和reconciler。
- event:包含一些更为底层的事件方法,如事件插件中心(EventPluginHub)、事件注册
(EventPluginRegistry)、事件传播(EventPropagators)以及一些事件通用方法。
React 自定义了一套通用事件的插件系统,该系统包含事件监听器、事件发射器、事
件插件中心、点击事件、进/出事件、简单事件、合成事件以及一些事件方法。 - reconciler:称为协调器,它是最为核心的部分,包含 React 中自定义组件的实现
(ReactCompositeComponent)、组件生命周期机制、setState 机制(ReactUpdates、
ReactUpdateQueue)、DOM diff 算法(ReactMultiChild)等重要的特性方法。
VirtualDOM与真实DOM的关系很简单:
- 真实DOM可以理解为是xml格式存储DOM,VirtualDOM可以理解为json格式的存储DOM。
- 只需要存储节点的关键信息:类型,id,class,属性,style,事件,嵌套关系等即可,按照一定的转换规则将json转成DOM。
- 流程关系:jsx语法->识别jsx语法生成VirtualDOM树->根据渲染规则生成真实DOM->HTML。
Virtual DOM中的节点成为ReactNode,分成ReactELement,ReactFragment,ReactText。ReactElement又分成ReactComponentElemnt和ReactDOMElement。
type ReactNode = ReactElement | ReactFragment | ReactText;
type ReactElement = ReactComponentElement | ReactDOMElement;
type ReactDOMElement = {
type : string,
props : {
children : ReactNodeList,
className : string,
etc.
},
key : string | boolean | number | null,
ref : string | null
};
type ReactComponentElement<TProps> = {
type : ReactClass<TProps>,
props : TProps,
key : string | boolean | number | null,
ref : string | null
};
type ReactFragment = Array<ReactNode | ReactEmpty>;
type ReactNodeList = ReactNode | ReactEmpty;
type ReactText = string | number;
type ReactEmpty = null | undefined | boolean;