Question

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

setState（）不会立即改变this.state，但会创建挂起状态转换。在调用此方法后访问this.state可能会返回现有值。

无法保证对setState的调用进行同步操作，并且可以对调用进行批处理以获得性能提升。

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

Answer 1

您可以使用forceUpdate：

如果你的render（）方法从this.props或。以外的东西读取 this.state，你需要告诉React何时需要重新运行render（）通过调用forceUpdate（）。你还需要调用forceUpdate（）if 你直接改变this.state。

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

Answer 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

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

2 个答案: