React 应用程序中的应用程序初始化代码在哪里？

Question

首先，我是 React 新手，所以请放轻松，我已经寻找了重复的问题。

我了解 React 是基于组件的以及如何初始化组件，但是应用程序引导时运行的代码在哪里？

例如，我正在尝试制作一个小型应用程序，它使用 PusherJS 进行基于 websocket 的通信。当应用程序加载时，我需要通过 ajax 调用连接到推送通道并存储一些数据。当 Pusher 发送事件时，我需要与下部组件（如 MessageList 组件）进行通信，告知已收到新消息以及新数据是什么。

对于熟悉 AngularJS 的人来说，我会在 .config() 块中完成此操作，并将数据存储在服务或 $rootScope 中，但什么是“React Way”？

Answer 1

一个好的起点是您ReactDOM.render()调用渲染 React 树的地方。

以下是有关如何处理您的用例的伪代码：

function render(data) {
  ReactDOM.render(rootElement, <MyApp data={data} />);
}

// connect to socket, then listen for data and re-render whenever data is received
connectSocket()
  .then(socket => {
     render({ status: "connected", data: null });
     socket.on("event", ev => {
       // new data!!
       render({ status: "connected", data: ev.data });
     });
   }, err => render({status "error", data: { error: err } }));

// do an initial render with "connecting" status
render({status: "connecting", data: null });

这是一个有点“玩具”的例子。对于更复杂的流程，您可能会让套接字连接将事件分派到 redux 存储（或 mobX 或您正在使用的任何状态解决方案）。

componentDidMount您还可以在根 React 组件的方法中启动套接字连接逻辑。