如何重置反应组件,包括所有可传递的可达状态？

Question

我偶尔会对概念上有状态的组件做出反应,我想重置它们.理想的行为相当于删除旧组件并读取新的原始组件.

React提供了一种方法setState,允许设置组件自己的显式状态,但不包括隐式状态,如浏览器焦点和表单状态,并且它还排除其子级的状态.抓住所有间接状态可能是一个棘手的任务,我宁愿严格而完全地解决它,而不是每一个令人惊讶的新状态都在玩捣蛋.

是否有API或模式来执行此操作？

编辑: 我做了一个简单的例子来演示这种this.replaceState(this.getInitialState())方法并将其与方法进行对比this.setState(this.getInitialState()):https://jsfiddle.net/emn13/kdrzk6gh/ - replaceState更强大.

Answer 1

要确保重置您提及的隐式浏览器状态和子状态,可以将key属性添加到返回的根级别组件render; 当它发生变化时,该组件将被抛弃并从头开始创建.

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

重置单个组件的本地状态没有捷径.

Answer 2

实际上你应该避免replaceState使用它setState.

文档说replaceState"可能会在未来的React版本中完全删除." 我认为它绝对会被删除,因为replaceState它并没有真正符合React的理念.它有助于使React组件开始感觉有点瑞士刀.这反映了React组件的自然生长变得更小,更有目的性.

在React中,如果你不得不在泛化或专业化方面犯错:专注于专业化.作为必然结果,组件的状态树应该具有一定的简约性(如果您正在构建一个打破品牌的新产品,那么很好地破坏这个规则).

无论如何,这就是你如何做到的.类似于上面的Ben(已接受)答案,但是像这样:

this.setState(this.getInitialState());

另外(像Ben也说)为了重置"浏览器状态",你需要删除那个DOM节点.利用vdom的力量并key为该组件使用新的道具.新的渲染将取代该组件批发.

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

Answer 3

在key您需要重新初始化的元素上添加属性，将在每次元素更改props或state与元素更改关联时重新加载该属性。

key = {new Date（）。getTime（）}

这是一个例子：

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}