react源码探索_工具方法

  • addons:工具方法插件:PureRenderMixinCSSTransitionGrouoFragmentLinkedStateMixin
  • isomorphic:包含一系列同构方法。
  • shared:公用方法和常用方法。
  • test:测试方法。
  • core/tests:边界错误的测试用例。
  • renderers:React的核心代码,包含大部分功能实现,因此进行单独分析。

react源码探索_工具方法_02


  • 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)等重要的特性方法。


react源码探索_测试用例_03


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;