ReactJS

Question

我是 React 和前端开发的新手。这实际上是我现在的第一个项目，我在听取外部事件时遇到了设计问题。所以基本上我想构建一个 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 的好方法吗？或者是否有更好的方法或模式我可以使用或在前端开发中很常见？

Answer 1

您的方法完全有效，我没有发现任何问题。

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

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

ReactJS - Triggering Re-render from external Process

components

frontend

observer-pattern