基于源码解析 Flux 架构

作者: 犯迷糊的小羊 | 来源:发表于2021-03-14 10:15 被阅读0次

Flux

Flux 是 Facebook 在 2014 年提出的 Web 应用架构，其核心思想是将应用划分为 action 层、dispatcher 层、store 层和 view 层。

整个应用的运行方式是，用户页面交互行为触发特定类型的 action，dispatcher 会携带特定的 action type 和数据到 store 层，store 层会处理不同 action 类型下的数据变更逻辑，再把变动更新到 view 层。

flux framework

源码分析

Actions

Actions 就是一个描述操作类型和携带数据的对象，可以设计为一个 Action Creator；

var todoDispatcher = new Dispatcher();

var Actions = {
    addTodo(text) {
        todoDispatcher.dispatch({
            type: 'ADD_TODO',
            text
        });
    }
}

Dispatcher

Dispatcher 在 Flux 架构中扮演的角色是连接 Actions 和 Stores，Dispatcher 提供两个方法，dispatcher.register 用于注册处理 state 变更和 view 更新的逻辑，dispatcher.dispatch 用于触发 dispatcher 注册的各个回调；

Dispatcher 在 Flux 架构中是一个单例，所有 stores 都绑定在一个 dispatcher；

var _prefix = 'ID_';

class Dispatcher {
    constructor() {
        this._isDispatching = false;
        this.isPending = {};
        this._isHandled = {};
        this._pendingPayload = null;
        this._lastID = 1;
        this._callbacks = {};
    }

    register(callback) {
        var id = _prefix + this._lastID++;
        this._callbacks[id] = callback;
        return id;
    }

    // 同一个 payload 将会作为所有 callback 的 payload
    dispatch(payload) {
        this._startDispatching(payload);
        try {
            for (var id in this._callbacks) {
                if (this._isPending[id]) continue;
                this._invokeCallback(id);
            }
        } finally {
            this._stopDispatching();
        }
    }
    _startDispatching(payload) {
        for (var id in this._callbacks) {
            this._isPending[id] = false;
            this._isHandled[id] = false;
        }
        this._pendingPayload = payload;
        this._isDispatching = true;
    }
    _stopDispatching() {
        delete this._pendingPayload;
        this._isDispatching = false;
    }
    _invokeCallack(id) {
        this._isPending[id] = true;
        this._callbacks[id](this._pendingPayload);
    }
}

class TodoStore extends ReduceStore {
    constructor() {
        super(todoDispatcher);
    }

    getInitialState() {
        // todo
        return null;
    }

    reduce(state, action) {
        switch(action.type) {
            case 'ADD_TODO':
                if (!action.text) return state;
                const id = uuid.v4();
                return state.set(id, {
                    id,
                    text: action.text,
                });
            default:
                return state;
        }
    }
}

export default new TodoStore();

Store

Flux 架构在创建业务 Store 的时候，将全局单例 dispatcher 和 store 进行绑定，并在 dispatcher 中注册回调函数；

dispatcher.dispatch 调用时，store 中注册的回调函数会触发，遍历和调用 dispatcher._callbacks 的所有回调；

回调函数会调用 store.reduce 方法，如果产生新的 state，则会发送变更事件;

注意，这里的 reduce 是一个纯函数，当 state 发生变化时，会返回一个新的 Immutable 对象，如果没有发生变化则返回原来的 Immutable 对象，根据 Immutable 对象是否发生变化触发后续渲染更新；

Store 可以根据业务分割不同的特定 Store

// ReduceStore
class FlexReduceStore extends FluxStore {
    constructor(dispatch) {
        super(dispatch);
        this._state = this.getInitialState();
    }
    getState() {
        return this._state;
    }
    /**
   * Checks if two versions of state are the same. You do not need to override
   * this if your state is immutable.
   */
  areEqual(one: TState, two: TState): boolean {
    return one === two;
  }
    // 抽象方法
    getInitialState() {}
    // 抽象方法
    reduce() {}
    __invokeOnDispatch() {
        this.__changed = false;
        const startingState = this._state;
        const endingState = this.reduce(startingState, action);

        if (!this.artEqual(startingState, endingState)) {
            this._state = endingState;
            this.__emitChanged();
        }

        if (this.__changed) {
            this.__emitter.emit(this.__changedEvent);
        }
    }
}

// FluxStore
class FluxStore {
    constructor(dispatcher) {
        this.__changed = false;
        this.__changeEvent = 'change';
        this.__dispatcher = dispatcher;
        this.__emitter = new EventEmitter;
        this._dispatchToken = dispatcher.register((payload) => {
            this.__invokeOnDispatch(payload);
        });
    }
    getDispatchToken() {
        return this._dispatchToken;
    }
    addListener(callback) {
        return this.__emitter.addListener(this.__changedEvent, callback);
    }
    __invokeOnDispatch(payload) {
        this.__changed = false;
        this.__onDispatch(payload);
        if (this.__changed) {
            this.__emitter.emit(this.__changedEvent);
        }
    }
    // 抽象方法
    __onDispatch(action) {

    }
    __emitChange() {
        this.__changed = true;
    }
}

Container

绑定 View 和 Stores 的 controller-view，使得经过 dispatcher.dispatch 后变化的数据能够传递给 view 并进行更新

function getStores() {
    return [
        todoStore,
    ];
}

function getState() {
    return {
        todos: todoStore.getState(),
        onAdd: todoActions.addToDo,
    }
}

Container.createFunctional(AppView, getStores, getState);

// createFunctional
function createFunctional(viewFn, getStores, calculateState) {
    class FunctionalContainer extends React.Component {
        state = null;
        static getStores(props, context) { 
            return getStores(props, context);
        }
        static calculateState(prevState, props, context) {
            return calculateState(prevState, props, context);
        }
        render() {
            return viewFn(this.state)
        }
    }

    return create(FunctionalContainer);
}

// create
function create(Base) {
    const getState = (state, maybeProps, maybeContext) => {
        return Base.calculateState(state, maybeProps, maybeContext);
    }

    const getStores = (maybeProps, maybeContext) => {
        return Base.getStores(maybeProps, maybeContext);
    }

    class ContainerClass extends Base {
        _fluxContainerSubscriptions: null;
        constructor(props, context) {
            super(props, context);
            this._fluxContainerSubscriptions = new FluxContainerSubscriptions();
            this._fluxContainerSubscriptions.setStores(getStores(props, context));
            // *核心*
            this._fluxContainerSubscriptions.addListener(() => {
                this.setState((prevState, currentProps) => getState(
                    prevState,
                    currentProps,
                    context,
                ));
            });
            const calculatedState = getState(undefined, props, context);
            this.state = {
                ...(this.state || {}),
                ...calculatedState,
            }
        }

        componentWillUnmount() {
            if (super.componentWillUnmount) {
                super.componenetWillUnmount();
            }
            this._fluxContainerSubscriptions.reset();
        }
    }

    const container = ContainerClass;
    return container;
}

// FluxContainerSubscriptions
class FluxContainerSubscriptions {
    _callbacks;
    _stores;
    _tokens;
    _storeGroup;

    constructor() {
        this._callbacks = [];
    }
    setStores(stores) {
        this._stores = stores;
        this._resetTokens();
        this._resetStoreGroup();

        let changed = false;
        let changedStores = [];
        const setChanged = () => { changed = true; }
        this._tokens = store.map(store => store.addListener(setChanged));
        const callCallbacks = () => {
            if (changed) {
                this._callbacks.forEach(fn => fn());
                changed = false;
            }
        }
        this._storeGroup = new FluxStoreGroup(stores, callCallbacks);
    }
    addListener(fn) {
        this._callbacks.push(fn);
    }
    reset() {
        this._resetTokens();
        this._resetStoreGroup();
        this._resetCallbacks();
        this._resetStores();
    }
    _resetTokens() {
        if (this._tokens) {
            this._tokens.forEach(token => token.remove());
            this._tokens = null;
        }
    }
    _resetStoreGroup() {
        if (this._storeGroup) {
            this._storeGroup.release();
            this._storeGroup = null;
        }
    }
    _resetCallbacks() {
        this._callbacks = [];
    }
    _resetStores() {
        this._stores = null;
    }
}

// FluxStoreGroup
class FluxStoreGroup {
    constructor(stores, callback) {
        this._dispatcher = _getUniformDispatcher(stores);
        var storeTokens = stores.map(store => store.getDispatchToken());
        this._dispatchToken = this._dispatcher.register(payload => {
            this._dispatcher.waitFor(storeTokens);
            callback();
        });
    }
    release() {
        this._dispatcher.unregister(this._dispatchToken);
    }
}

function _getUniformDispatcher() {
    var dispatcher = stores[0].getDispatcher();
    return dispatcher;
}

Flux 运行机制

Dispatcher

Dispatcher 是全局单例，多个 stores 和单一 dispatcher 绑定，每实例化一个 store，都会向 dispatcher 注册对应的回调函数；

dispatcher.dispatch

遍历 dispatcher._callbacks，会调用所有注册的回调函数
所有注册的回调函数都是一样的，就是 store.__invokeOnDispatch(payload)
如何知道当前 action 应该正确触发那个 store.reduce 生成新的，通过对应 store 的 store.reduce 中的 action.type 进行匹配。

new Store()

每实例化一个 Store，会 dispatcher.register 一个回调函数
回调函数会放入 dispatcher._callbacks 对象中
回调函数部署的是 store.__invokeOnDispatch(payload) 方法

store.__invokeOnDispatch(payload)

调用 store.reduce(prevState, action) 方法，计算出更新后的 state
如果数据发生改变，则通过 store.__emiiter.emit() 发送 change 事件

Container

function getStores() {
  return [store]
}

function getState() {
  return {
    todos: store.getState(),
  }
}

通过 Container.createFunctional(AppView, getStores, getState) 将 stores 和 view 绑定在一起
内部通过 ContainerClass 生成 view，ContainerClass 在 constructor 通过 FluxContainerSubscriptions 部署订阅 stores 变更的回调函数

FluxContainerSubscriptions (sub)

view 在初始化时，通过 sub.setStores(stores) 部署事件回调函数
通过 this._tokens = stores.map(store => store.addListener(setChanged))，标识 sub 实例状态是否发生变化，只有在 changed = true 的情况下，绑定在 sub 上的更新 view 的更新逻辑才会触发
store.addListener(callback) 内部部署 store.__emitter.addListener('change', callback) 方法，当 store.reduce() 方法调用后 state 发生变化，会通知给到 sub，并设置 changed 为 true;
view 更新回调函数部署在 callCallback 函数，并托管在 FluxStoreGroup 实例

FluxStoreGroup

FluxStoreGroup 会额外将更新视图的逻辑 callCallback 注册到 dispatcher；
并且需要等到其他注册到 dispatcher 的 stores 回调函数调用后，才会进行 callCallback()
只有先等到其他注册到 dispatcher 的 stores 回调函数调用，才能知道 state 是否发生改变，从而决定是否更新视图

总的来看，Flux 架构通过 Container 将 stores 和 view 绑定在一起；每个 stores 在实例化的时候，都会向全局单例 dispatcher 注册自身的 reduce，store.reduce 定义了针对不同 actions ，state 所作出的改变；此外，Container 在初始化时，还会额外将更新视图的逻辑 component.setState 注册到 dispatcher 中，将所有的 stores 注册 change 事件的回调函数，用于后续再 state 发生变化时，设置 changed 这一状态锁，这一状态锁用于控制是否进行视图渲染；当 view 视图发生交互，通过 dispatcher.dispatch 提交特定 action 时，dispatcher 会遍历先前注册好的回调列表，回调列表中的函数会调用 store.reduce 计算出 new state，然后会比较前后 state，如果 state 发生变化，store 则会发送 change 事件；change 事件会使得 changed 设置为 true，因此在遍历到更新视图的回调函数时，会开启视图渲染；

Immutable 对象

Flux 架构中，采用 Immutable 对象进行状态前后的比较。

之所以采用 Immutable 对象，是因为在比较前后状态变化的时候，需要快速识别出状态是否产生变化，最快的比较方式是采用浅比较（引用比较）；

Immutable 对象的特点就是 Immutable 对象一旦创建就无法修改，如果数据发生变化会产生一个新的 Immutable 对象，如果没有发生变化则会返回原来的 Immutable 对象的引用，因此非常好的契合上述场景。此外，Immutable 对象修改时所创建的新的对象采用优化算法，开销较小，并且有利于实现变化追踪技术。

Immutable 对象被视为值，所以 Immutable 对象在进行 === 比较时是值比较；

// 如果 Immutable 对象未发生改变，则 Immutable 对象是相等的
const map1 = Map({a: 1, b: 2, c: {d: 1}});
const map2 = Map({a: 1, b: 2, c: {d: 1}});
const map3 = map1.set('a', 1);
map1.equals(map2); // true
map1 === map2; // true
map3 === map1; // true  由于值为发生变化

// 如果值发生变化，则 Immutable 对象返回一个新的 Immutable 对象
const map4 = map1.set('a', 2);
map4 === map1; // false

map1.get('a'); // 1
map1.set('a', 1);
map1.getIn(['a', 'c', 'd']); // 1
map1.setIn(['a', 'c', 'd'], 2); // {a: 1, b: 2, c: {d: 2}}
map1.updateIn(['a', 'c', 'd'], value => value + 1); // {a: 1, b: 2, c: {d: 2}}

基于源码解析 Flux 架构

Flux

源码分析

Actions

Dispatcher

Store

Container

Flux 运行机制

Dispatcher

dispatcher.dispatch

new Store()

store.__invokeOnDispatch(payload)

Container

FluxContainerSubscriptions (sub)

FluxStoreGroup

Immutable 对象

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读