javascript - 应用程序初始化代码在 React 应用程序中放在哪里？

Question

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

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

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

对于那些熟悉 AngularJS 的人，我会在 .config() block 中完成此操作并将数据存储在服务或 $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 });

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

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