我怎样才能重置一个反应组件,包括所有可传递的状态?

我偶尔会对想要重置的概念状态的组件做出反应。 理想的行为相当于删除旧的组件,并读取一个新的,原始的组件。

React提供了一个方法setState ,它允许设置组件自己的显式状态,但不包括浏览器焦点和窗体状态等隐式状态,也排除了子组件的状态。 捕捉所有的间接状态可能是一个棘手的任务,我宁愿严格而完全地解决它,而不是玩每一个令人惊讶的状态每一个新的一点点痣。

有没有一个API或模式来做到这一点?

编辑:我做了一个简单的例子,展示this.replaceState(this.getInitialState())方法,并与this.replaceState(this.getInitialState())方法进行对比: https : this.setState(this.getInitialState())replaceState更健壮。

为了确保您提到的隐式浏览器状态和子项的状态被重置,可以将一个key属性添加到由render返回的根级组件中; 当它发生变化时,该组件将被从头开始抛弃和创build。

 render: function() { // ... return <div key={uniqueId}> {children} </div>; } 

没有捷径可以重置单个组件的本地状态。

实际上你应该避免replaceState并使用setState来代替。

文档说replaceState “可能会在未来版本的React中完全删除”。 我认为它肯定会被删除,因为replaceState并不真正与React的哲学相处。 它有助于使一个React组件开始感到有点瑞士刀。 这使得React组件的自然增长变得越来越小,而且越来越有目的性。

在React中,如果你不得不在泛化或专业化方面犯错误:专门化的目标。 作为一个推论,你的组件的状态树应该有一定的简约性(如果你支持一个品牌崭新的产品,可以高雅地打破这个规则)。

无论如何,这是你如何做到这一点。 与上面的Ben(接受)的答案类似,但是像这样:

 this.setState(this.getInitialState()); 

此外(如本也说)为了重置“浏览器状态”,您需要删除该DOM节点。 利用vdom的威力,并为该组件使用新的key支柱。 新的渲染将取代批发组件。

参考: https : //facebook.github.io/react/docs/component-api.html#replacestate