一文彻底搞懂 DvaJS 原理，前端进阶

};

// 2. 调用 dva-core 里的 create 方法 ，函数内实例化一个 app 对象。

const app = create(opts, createOpts);

const oldAppStart = app.start;

// 3. 用自定义的 router 和 start 方法代理

app.router = router;

app.start = start;

return app;

// 3.1 绑定用户传递的 router 到 app._router

function router(router) {

invariant(

isFunction(router),

[app.router] router should be function, but got ${typeof router},

);

app._router = router;

}

// 3.2 调用 dva-core 的 start 方法，并渲染视图

function start(container) {

// 对 container 做一系列检查，并根据 container 找到对应的DOM节点

if (!app._store) {

oldAppStart.call(app);

}

const store = app._store;

// 为HMR暴露_getProvider接口

// ref: https://github.com/dvajs/dva/issues/469

app._getProvider = getProvider.bind(null, store, app);

// 渲染视图

if (container) {

render(container, store, app, app._router);

app._plugin.apply(‘onHmr’)(render.bind(null, container, store, app));

} else {

return getProvider(store, this, this._router);

}

}

}

function getProvider(store, app, router) {

const DvaRoot = extraProps => (

{router({ app, history: app._history, …extraProps })}

);

return DvaRoot;

}

function render(container, store, app, router) {

const ReactDOM = require(‘react-dom’); // eslint-disable-line

ReactDOM.render(React.createElement(getProvider(store, app, router)), container);

}

我们同时可以发现 app 是通过 create(opts, createOpts)进行初始化的，其中 opts 是暴露给使用者的配置，createOpts 是暴露给开发者的配置，真实的 create 方法在 dva-core 中实现

dva-core[16]

dva-core 则完成了核心功能：

1. 通过 create 方法完成 app 实例的构造，并暴露 use、model 和 start 三个接口

2. 通过 start 方法完成

• store 的初始化

• models 和 effects 的封装，收集并运行 sagas

• 运行所有的 model.subscriptions

• 暴露 app.model、app.unmodel、app.replaceModel 三个接口

dva-core create

作用： 完成 app 实例的构造，并暴露 use、model 和 start 三个接口

// dva-core/src/index.js

const dvaModel = { <