Javascript React应用程序中的应用程序初始化代码是什么？

首先，我是新来的反应，所以请对我放轻松，我一直在寻找重复的问题

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

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

---

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

一个好的起点是调用

ReactDOM.render（）

来呈现反应树

下面是如何处理用例的伪代码：

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 });

函数渲染（数据）{
render（rootElement，）；
}
//连接到套接字，然后侦听数据并在收到数据时重新渲染
connectSocket（）
.然后（套接字=>{
呈现（{状态：“已连接”，数据：null}）；
socket.on（“事件”，ev=>{
//新数据！！
呈现（{状态：“已连接”，数据：ev.data}）；
});
}，err=>render（{status“error”，data:{error:err}}））；
//使用“连接”状态执行初始渲染
呈现（{状态：“正在连接”，数据：null}）；

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

---

您还可以在根React组件的

componentDidMount

方法中启动套接字连接逻辑。

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

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

import React，{Component}来自“React”
类应用程序扩展组件{
状态={receivedEvent:null}；
render（）{
返回(
（这是什么(
) : (
在此处显示一些连接活动。。。
))
)
}
componentDidMount（）{
connectToSocket（）.then（receivedEvent=>this.setState（{receivedEvent}））
}
}
导出默认应用程序

---

所以，应用程序组件可以将事件作为属性传递给它的子组件。但是，这不是一种“反应”方式，不建议这样做。“React”方法是使用状态容器（比如Redux）。通过这种方式，

componentDidMount

将调用reducer，并将状态数据传递给具有属性的应用程序组件。

谢谢。因此，答案是根应用程序组件的componentDidMount是放置应用程序初始化逻辑的地方，因此没有引导功能。剩下的唯一问题是如何将事件发送到深度嵌套的组件，从我所读到的内容来看，我假设我正在查看上下文API或Redux来实现这一点？是的，您要么将数据作为道具传递到底，要么使用Redux或Mobx之类的状态库。上下文是另一种可能性，但我不知道这有多好works@jonhobbs我只能评论我自己的答案，所以一定要从另一个评论中回答你的问题。您不需要向嵌套组件发送事件。您可以使用

connect（MapStateTrops，mapDispatchToProps）（ComponentName）

将组件绑定到状态。请注意，在这里您也将组件绑定到还原器。所以，当组件中发生某个事件时，在事件处理程序中需要调用reducer。减速器本身会改变状态。此状态更改会导致组件更新。