React + MobX + 服务端渲染：如何恢复组件状态？

嘿，这个问题问到点子上了——完全可以恢复所有组件的状态，但得跟着MobX的规则来走，我给你捋清楚具体怎么操作，还有要注意的坑：

MobX的状态是基于可观察对象的，服务端渲染时你得先把根Store的状态转换成纯可序列化的数据，然后在客户端hydrate的时候把这些数据重新注入到Store里，所有依赖这个Store的组件就会自动同步状态了——毕竟MobX的响应式系统可不是吃素的。

具体操作步骤 #

• 第一步：服务端序列化状态
  别直接序列化整个Store实例，因为MobX的可观察对象自带很多内部属性，序列化会出问题。你得给每个子Store写个toJSON方法，专门返回纯数据：

  // 子Store示例
  class UserStore {
    @observable currentUser = null;
  
    // 自定义toJSON，返回纯数据
    toJSON() {
      return { currentUser: this.currentUser };
    }
  }
  
  // 服务端渲染时
  const rootStore = new RootStore();
  // 先填充服务端需要的状态（比如拉取用户数据）
  await rootStore.userStore.fetchCurrentUser();
  // 序列化根Store的纯数据
  const serializedState = JSON.stringify({
    user: rootStore.userStore.toJSON(),
    products: rootStore.productStore.toJSON()
  });
  

  然后把这个序列化后的状态塞进HTML的全局变量里，让客户端能拿到：

  <script>
    window.__INITIAL_STATE__ = ${serializedState};
  </script>
  

• 第二步：客户端初始化Store并恢复状态
  客户端创建Store实例时，把全局的__INITIAL_STATE__传进去，让Store在构造时就把状态恢复成可观察对象：

  class RootStore {
    constructor(initialState = {}) {
      // 给子Store传入初始状态
      this.userStore = new UserStore(initialState.user);
      this.productStore = new ProductStore(initialState.products);
    }
  }
  
  // 客户端初始化
  const initialState = window.__INITIAL_STATE__ || {};
  const rootStore = new RootStore(initialState);
  

  子Store要处理传入的初始数据，把普通对象转成MobX的可观察对象：

  class UserStore {
    @observable currentUser = null;
  
    constructor(initialData) {
      if (initialData) {
        // MobX会自动把普通对象转为可观察对象
        this.currentUser = initialData.currentUser;
      }
    }
  }
  

• 第三步：组件自动同步状态
  只要你的组件都用@observer装饰了，Store状态恢复后，组件会自动响应更新——完全不用手动去恢复每个组件的状态。因为MobX会自动追踪组件依赖的可观察数据，状态一变，组件就跟着更。

避坑指南 #

• 别序列化不可序列化的东西：比如函数、Symbol、循环引用对象，这些会让JSON序列化报错，toJSON里只返回纯字符串、数字、普通对象/数组就行。
• 服务端和客户端的Store结构必须完全一致：要是两边的Store类定义不一样，状态恢复肯定会出问题。
• 别直接改全局的__INITIAL_STATE__：一定要通过Store的构造函数注入，不然MobX的可观察性会失效。

内容的提问来源于stack exchange，提问作者J. Snow