react事务原理

react事务的基本原理

就是在执行目标代码之前，之后可以添加很多自己的逻辑
将目标代码经过自身的perform的封装可以在执行前后添加一组或者多组逻辑方法

实现

class TranSaction { // 处理类
    perform(anyMethod, wrappers, ...args) {
        // 执行全部预设好的before代码
        wrappers.forEach(wrapper => wrapper.initialize());
        anyMethod(...args);
        // 执行全部预设好的after代码
        wrappers.forEach(wrapper => wrapper.close());
    }
}
const transaction = new TranSaction();
// 原始函数
function oldFn(...args) {
    console.log('原始逻辑', ...args);
}

transaction.perform(oldFn, [
    { // 添加的第一重逻辑
        initialize() {
            console.log('执行前1');
        },
        close() {
            console.log('执行后1');
        }
    },
    { // 添加的第二重逻辑
        initialize() {
            console.log('执行前2');
        },
        close() {
            console.log('执行后2');
        }
    }
], '原始逻辑的传参1', '原始逻辑的传参2');

执行结果