Question

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

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

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

修改：我做了一个简单的示例，演示了this.replaceState(this.getInitialState())方法并将其与this.setState(this.getInitialState())方法进行了对比：https://jsfiddle.net/emn13/kdrzk6gh/ - replaceState更多的鲁棒性。

Answer 1

为确保重置您提及的隐式浏览器状态和子项状态，您可以将key attribute添加到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>
  );
}

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

3 个答案: