应该在哪里放置应该运行 First ReactJs + Mobx 状态树的代码答案

【问题标题】：Where to Put Code that should run First ReactJs + Mobx State Tree应该在哪里放置应该运行 First ReactJs + Mobx 状态树的代码
【发布时间】：2019-07-25 17:56:14
【问题描述】：

我有一些代码可以获取用户的 ipAddres。我现在在我的componentDidMount 我的app.js 中这样做

 async componentDidMount() {
    await eventTrackingStore.getIpAddress();
  }

所以我在我的 app.js 中做了它，因为它是我的根组件，我只想设置一次。如果用户从主页开始并浏览该站点，这将正常工作。

但是有些页面可以直接加载（即您在浏览器中输入网址，它会直接进入该页面）。

由于 react 生命周期从最直接的组件开始，它调用一个方法，该方法期望设置 ipAddress 代码，但直到它到达 app.js 后才设置

现在我可以将上面的代码放在每个方法中，但这会变得乏味。 reactjs 或 mbox 或 mbox 状态树中是否有某种方法会首先触发？

【问题讨论】：

标签： reactjs mobx mobx-state-tree

【解决方案1】：

如果您使用 mobx-state-tree 并且您有一个全局存储，那么该全局存储可以在 afterCreate 方法中进行 API 调用

const AppModel = types.model({
  ips: types.array(types.string)
}).actions(self => ({
  afterCreate() {
    flow(function*() {
      const ips = yield eventTrackingStore.getIpAddress();
      self.setIps(ips)
    })()

  },
  setIps(ips: string[]) {
    self.ips = ips
  }
}))

或您可以在包装应用程序每个页面的包装反应组件中执行相同的操作。

class App extends React.Component {
  componentDidMount() {
    eventTrackingStore.getIpAddress().then(res => {
      // set the ips into a store or any logic you want in order to pass them down to children         
    })
  }

  render() {
    return this.props.children
  }
}

【讨论】：

酷，我最终也弄清楚了 afterCreate 虽然我不知道你可以像第一次那样做里面的流程是一个流程，并在 afterCreate 中调用。也喜欢你的包装方式。

【解决方案2】：

我可以想到两种解决方案：你可以使用react context

上下文提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递道具。

使用上下文在所有组件之间共享存储，如果未加载数据，则在该嵌套组件中初始化加载。

如果数据已经存在，那么就拿走它， getIpAddress 方法应该返回一个承诺，所以如果数据已经存在，它将立即被解析。

【讨论】：