立即使用 react.js 强制重新渲染（更新状态并更新 DOM）答案

【问题标题】：Force a re-render (update the state and update the DOM) immediately with react.js立即使用 react.js 强制重新渲染（更新状态并更新 DOM）
【发布时间】：2015-08-30 13:27:58
【问题描述】：

我意识到调用setState 不会立即更新this.state，也不会立即调用render 并刷新DOM。文档说

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

不保证 setState 调用的同步操作，并且调用可能会被批处理以提高性能。

我希望能够在任何时候强制进行这样的“状态转换”。这似乎应该是一个相当自然的操作，但我在文档中找不到任何提及。有办法吗？

【问题讨论】：

您的用例是什么？您可能对原子setState 更感兴趣。
有这个要求你想做什么？

标签： javascript reactjs

【解决方案1】：

您可以为此使用forceUpdate：

如果你的 render() 方法读取的不是 this.props 或 this.state，你需要告诉 React 什么时候需要重新运行 render() 通过调用 forceUpdate()。您还需要调用 forceUpdate() 如果你直接改变 this.state。

https://facebook.github.io/react/docs/component-api.html#forceupdate

【讨论】：

我不确定forceUpdate 是否符合我的要求（也许确实如此，但无论哪种方式都不清楚。）我认为forceUpdate 的意义在于制作元素即使没有设置状态也重新渲染，但是这个渲染仍然可以像任何渲染一样排队。这是对还是错？
没错。 forceUpdate 使组件渲染到 vDOM elements 中，但它不会强制将 vDOM 刷新到实际 DOM（不确定如何实现您想要的）

【解决方案2】：

您可以将forceUpdate 与顶级组件上的键结合使用..

let key= 0;

var Hello = React.createClass({

  sudoForceUpdate(){
    key++;
    this.forceUpdate();   
  },
  render: function(){
    return <div key={key}>Example</div>;
  }
});

通过编辑密钥并强制更新，dom 将始终重新渲染。

这是一个示例，突出显示了仅强制编辑与更改键之间的区别*。

https://jsfiddle.net/69z2wepo/82763/

*请注意，这可能是非常糟糕的做法。

感谢 Ben Alpert： https://groups.google.com/forum/#!topic/reactjs/8JgClU9jol0

【讨论】：