当你想要两个React组件进行通信时，它们不受关系(父子关系)的约束，建议使用Flux或类似的架构。

您要做的是监听可观察组件存储的变化，该存储保存模型及其接口，并将导致呈现变化的数据保存为MyComponent中的状态。当存储推送新数据时，更改组件的状态，这会自动触发呈现。

通常你应该尽量避免使用forceUpdate()。从文档中可以看到:

通常情况下，你应该尽量避免使用forceUpdate()，只从这个中读取。道具和这个。render()中的状态。这使您的应用程序更加简单和高效

你可以有几种方法:

1. 使用forceUpdate()方法:

使用forceUpdate()方法时可能会出现一些故障。一个例子是它忽略shouldComponentUpdate()方法，并将重新呈现视图，而不管shouldComponentUpdate()是否返回false。因此，应该尽可能避免使用forceUpdate()。

2. 通过这个。状态转换为setState()方法

下面这行代码克服了前面例子中的问题:

this.setState(this.state);

实际上，所有这些都是用触发重新渲染的当前状态覆盖当前状态。这仍然不一定是最好的方法，但它确实克服了使用forceUpdate()方法时可能遇到的一些故障。

你可以使用forceUpdate()来了解更多细节。

只是另一个回复来支持接受的答案:-)

React不鼓励使用forceUpdate()，因为他们通常对函数式编程有一种非常“这是唯一的方法”的方法。这在很多情况下是没问题的，但许多React开发人员都有oo背景，使用这种方法，监听可观察对象是完全可以的。

如果你这样做，你可能知道你必须重新渲染时，可观察对象“火灾”，因此，你应该使用forceUpdate()，它实际上是一个加，shouldComponentUpdate()是不涉及在这里。

像MobX这样的工具，采用oo方法，实际上是在表面之下做这件事(实际上MobX直接调用render())

我发现最好避免使用forceUpdate()。强制重新呈现的一种方法是在临时外部变量上添加render()依赖项，并在需要时更改该变量的值。

下面是一个代码示例:

class Example extends Component{
   constructor(props){
      this.state = {temp:0};

      this.forceChange = this.forceChange.bind(this);
   }

   forceChange(){
      this.setState(prevState => ({
          temp: prevState.temp++
      })); 
   }

   render(){
      return(
         <div>{this.state.temp &&
             <div>
                  ... add code here ...
             </div>}
         </div>
      )
   }
}

当你需要强制重新渲染时，调用this.forceChange()。

当你想要两个React组件进行通信时，它们不受关系(父子关系)的约束，建议使用Flux或类似的架构。

您要做的是监听可观察组件存储的变化，该存储保存模型及其接口，并将导致呈现变化的数据保存为MyComponent中的状态。当存储推送新数据时，更改组件的状态，这会自动触发呈现。

通常你应该尽量避免使用forceUpdate()。从文档中可以看到:

通常情况下，你应该尽量避免使用forceUpdate()，只从这个中读取。道具和这个。render()中的状态。这使您的应用程序更加简单和高效