ReactReconcileTransaction源码(待定)
ReactReconcileTransaction模块用于在组件元素挂载前后执行指定的钩子函数,特别是componentDidMount、componentDidUpdate生命周期调用方法,其次是向组件实例注入updater参数,实现setState、replaceState、forceUpdate方法。
'use strict'; var _assign = require('object-assign'); // 回调函数队列,经PooledClass工厂化,使用getPooled方法创建实例、release方法销毁实例数据,即回调函数及其上下文 var CallbackQueue = require('./CallbackQueue'); // PooledClass.addPoolingTo(CopyConstructor)用于将构造函数CopyConstructor转化为工厂函数 // 意义是管理实例数据的创建和销毁,并将销毁数据的实例推入到实例池CopyConstructor.instancePool中 var PooledClass = require('./PooledClass'); // ReactBrowserEventEmitter模块的isEnabled、setEnabled方法默认使用ReactEventListener模块的同名方法 var ReactBrowserEventEmitter = require('./ReactBrowserEventEmitter'); // 输入框、文本框、contentEditable节点选中文案相关操作 var ReactInputSelection = require('./ReactInputSelection'); var ReactInstrumentation = require('./ReactInstrumentation'); // 原型继承Transaction的某构造函数的实例将拥有perform(method,args)方法 // 实现功能为,method函数执行前后,调用成对的前置钩子initialize、及后置钩子close;initialize为close提供参数 var Transaction = require('./Transaction'); // 作为组件构造函数ReactComponent的第三个参数updater传入 // 组件内的setState、replaceState、forceUpdate方法都通过调用ReactUpdateQueue的相应方法实现 var ReactUpdateQueue = require('./ReactUpdateQueue'); // 缓存选中文案的数据后,再行选中文案 var SELECTION_RESTORATION = { // 获取选中节点及文案的信息 initialize: ReactInputSelection.getSelectionInformation, // 以initialize选中文案的信息选中相关节点及文案 close: ReactInputSelection.restoreSelection }; // 组件绘制过程中截断事件派发,ReactBrowserEventEmitter.ReactEventListener._enabled置否实现 var EVENT_SUPPRESSION = { initialize: function () { var currentlyEnabled = ReactBrowserEventEmitter.isEnabled(); ReactBrowserEventEmitter.setEnabled(false); return currentlyEnabled; }, close: function (previouslyEnabled) { ReactBrowserEventEmitter.setEnabled(previouslyEnabled); } }; // 通过CallbackQueue回调函数队列机制,即this.reactMountReady // 执行this.reactMountReady.enqueue(fn)注入componentDidMount、componentDidUpdate方法 // 通过Transaction添加前、后置钩子机制 // 前置钩子initialize方法用于清空回调队列;close用于触发回调函数componentDidMount、componentDidUpdate执行 var ON_DOM_READY_QUEUEING = { initialize: function () { this.reactMountReady.reset(); }, close: function () { this.reactMountReady.notifyAll(); } }; var TRANSACTION_WRAPPERS = [SELECTION_RESTORATION, EVENT_SUPPRESSION, ON_DOM_READY_QUEUEING]; // 开发环境调试相关 if (process.env.NODE_ENV !== 'production') { TRANSACTION_WRAPPERS.push({ initialize: ReactInstrumentation.debugTool.onBeginFlush, close: ReactInstrumentation.debugTool.onEndFlush }); } // 参数useCreateElement决定创建dom节点的时候是使用document.createElement方法,还是拼接字符串 function ReactReconcileTransaction(useCreateElement) { this.reinitializeTransaction();// 通过Transaction模块清空前后钩子 // 浏览器端渲染使用,虽然浏览器端渲染使用ReactServerRenderingTransaction // 客户端渲染设置此值为否,是ReactDOMComponent、ReactDOMTextComponent模块执行mountComponent的需要 this.renderToStaticMarkup = false; // 用于挂载回调函数,如componentDidMount、componentDidUpdate等 // 通过Transcation机制,作为后置钩子执行 this.reactMountReady = CallbackQueue.getPooled(null); this.useCreateElement = useCreateElement; } var Mixin = { // 通过Transaction模块设定前置及后置钩子,[{initialize,close}]形式 getTransactionWrappers: function () { return TRANSACTION_WRAPPERS; }, // 获取this.reactMountReady,用于添加回调函数如getReactMountReady().enqueue(fn) getReactMountReady: function () { return this.reactMountReady; }, // 作为组件构造函数ReactComponent的第三个参数updater传入 // 组件内的setState、replaceState、forceUpdate方法都通过调用ReactUpdateQueue的相应方法实现 getUpdateQueue: function () { return ReactUpdateQueue; }, // 获取this.reactMountReady中添加的回调函数componentDidMount、componentDidUpdate的个数 checkpoint: function () { return this.reactMountReady.checkpoint(); }, // 将this.reactMountReady中添加的回调函数个数设为checkpoint rollback: function (checkpoint) { this.reactMountReady.rollback(checkpoint); }, // 清空this.reactMountReady中的回调函数componentDidMount、componentDidUpdate,再销毁this.reactMountReady destructor: function () { CallbackQueue.release(this.reactMountReady); this.reactMountReady = null; } }; // 通过原型方法赋值获得Transaction中的reinitializeTransaction、getTransactionWrappers、perform方法 // reinitializeTransaction方法,用于重置钩子函数 // getTransactionWrappers方法,用于添加钩子函数,[{initialize,close}]形式 // perform(method)执行前后钩子函数、及method函数 // method函数为ReactMount模块中的mountComponentIntoNode函数 _assign(ReactReconcileTransaction.prototype, Transaction, Mixin); // 通过PooledClass模块管理实例的创建ReactReconcileTransaction.getPooled // 及实例数据的销毁ReactReconcileTransaction.release PooledClass.addPoolingTo(ReactReconcileTransaction); // 通过ReactUpdates模块输出接口ReactUpdates.ReactReconcileTransaction // 实现功能为在mountComponentIntoNode函数调用指定的钩子函数,包括用户配置的componentDidMount、componentDidUpdate回调 // 使用方式为getPooled方法创建实例,release方法销毁实例数据 // perform方法执行mountComponentIntoNode函数,及前后钩子函数 // getReactMountReady().enqueue(fn)添加用户配置的componentDidMount、componentDidUpdate回调 // getReactMountReady().checkpoint()方法获取回调个数 // getReactMountReady().rollback(checkpoint)将回调个数设为checkpoint // 另一实现功能为向组件实例注入updater参数,将向setState、replaceState、forceUpdate方法提供函数功能 module.exports = ReactReconcileTransaction;
相关推荐
瓜牛呱呱 2020-11-12
柳木木的IT 2020-11-04
yifouhu 2020-11-02
lei0 2020-11-02
源码zanqunet 2020-10-28
源码zanqunet 2020-10-26
一叶梧桐 2020-10-14
码代码的陈同学 2020-10-14
lukezhong 2020-10-14
lzzyok 2020-10-10
anchongnanzi 2020-09-21
clh0 2020-09-18
changcongying 2020-09-17
星辰大海的路上 2020-09-13
abfdada 2020-08-26
mzy000 2020-08-24
shenlanse 2020-08-18
zhujiangtaotaise 2020-08-18
xiemanR 2020-08-17