我怎样才能重置一个反应组件,包括所有可传递的状态?
我偶尔会对想要重置的概念状态的组件做出反应。 理想的行为相当于删除旧的组件,并读取一个新的,原始的组件。
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