ReactJS-从外部进程触发重新渲染

Question

我在React和Frontend开发中非常新。从字面上看，这是我现在的第一个项目，我在听外部事件时遇到了设计问题。因此，基本上我想构建一个仅在外部事件上发生更改的UI，这意味着您可以通过另一个流程（例如触发更改的AI）对其进行控制。该应用程序应侦听传入的消息，并应根据消息更新UI。

我的想法是使该组件（可从外部接收消息）成为可观察的组件，并将React-Ui通知MainApp。以下代码应为我的方法提供一个思路。

export default class App extends Component {
constructor(props){
    super (props);
    this.state = {mode: "idle"};
    this.observable = new Observable();
    this.observable.add((m) => mode(m));
}

mode(m){
    this.setState({
        mode: m
    });
}

render() {
    return (
        <div>
            <Home/>
            <ComponentA mode={this.state.mode}/>
            <ComponentB mode={this.state.mode}/>
        </div>
    )
}}

我现在的问题是，这是更新UI的好方法，还是我可以使用的更好的方法或模式，或者在Frontend-Development中很常见？

Answer 1

您的方法完全有效，我看不到任何问题。

您可以尝试使用生命周期方法初始化observable，而不是像componentDidMount一样。您甚至可以使用redux来管理从可观察对象传递的数据。