[MST] Restore the Model Tree State using Hot Module Reloading when Model Definitions Change

转载于 2018-01-28 22:55:00 发布 · 74 阅读

文章标签：

本文将指导您设置热模块替换(HMR)，实现React组件及MST模型定义的实时更新，同时保持应用状态不变。通过本教程，您将了解HMR的工作原理、如何接受组件变化以及如何在不丢失状态的情况下更新模型定义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

n this lesson, we will set up Hot Module Reloading(HMR), making it possible to load new definitions for React components and MST models and apply them to a running application.

In this lesson you will learn:

How HMR roughly works
How to accept changes to components
How to accept changes to changing model definitions, while keeping state

let wishList = WishList.create(initialState)

function renderApp() {
    ReactDOM.render(<App wishList={wishList} />, document.getElementById("root"))
}

renderApp()

if (module.hot) {
    module.hot.accept(["./components/App"], () => {
        // new components
        renderApp()
    })

    module.hot.accept(["./models/WishList"], () => {
        // new model definitions
        const snapshot = getSnapshot(wishList)
        wishList = WishList.create(snapshot)
        renderApp()
    })
}