Question

首先，我是React的新手，所以请放轻松，我一直在寻找重复的问题。

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

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

对于那些熟悉AngularJS的人来说，我会在.config（）块中完成此操作并将数据存储在服务或$ rootScope中，但是什么是“反应方式”？

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或您正在使用的任何状态解决方案）中。

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

Answer 2

对于一个非常简单的应用程序，可以利用组件状态

import React, { Component } from 'react'

class App extends Component {
    state = { receivedEvent: null };

    render() {
        return (
            <div>
                (this.state.receivedEvent ? (
                    <div><Event event={this.state.receivedEvent}/></div>
                ) : (
                    <div>display some connecting activity here...</div>
                ))
            </div>
        )
    }
    componentDidMount() {
        connectToSocket().then(receivedEvent => this.setState({receivedEvent}))
    }
}

export default App

因此，App组件可以将事件作为属性传递给其子组件。但是，这不是“反应”方式，因此不建议这样做。 “反应”方式是使用状态容器（例如Redux）。这样componentDidMount将调用reducer，状态中的数据应通过属性传递给App组件。

应用程式初始化程式码会放在React应用程式中吗？

2 个答案: