type
status
date
slug
summary
category
password
tags
icon
很久没看react文档了，很久也没用react了，今天翻阅官方文档看到了state的这一片文章，深有感触，原来我对state的理解那么浅🤣🤣。
📝 state 的保留和重置
各个组件的 state 是各自独立的。根据组件在 UI 树中的位置，React 可以跟踪哪些 state 属于哪个组件。你可以控制在重新渲染过程中何时对 state 进行保留和重置。
这种情况counter是隔离的，state互不干扰。
只有当在树中相同的位置渲染相同的组件时，React 才会一直保留着组件的 state。当你停止渲染第二个计数器的那一刻，它的 state 完全消失了。这是因为 React 在移除一个组件时，也会销毁它的 state。
只要一个组件还被渲染在 UI 树的相同位置，React 就会保留它的 state。 如果它被移除，或者一个不同的组件被渲染在相同的位置，那么 React 就会丢掉它的 state。
等同于：
相同位置的不同组件会使 state 重置
当
Counter 变为 p 时，Counter 会被移除，同时 p 被添加。
陷阱：
永远要将组件定义在最上层并且不要把它们的定义嵌套起来。
不应该把组件函数的定义嵌套起来。
每次你点击按钮，输入框的 state 都会消失！这是因为每次
MyComponent 渲染时都会创建一个 不同 的 MyTextField 函数。你在相同位置渲染的是 不同 的组件，所以 React 将其下所有的 state 都重置了。在相同位置重置 state
默认情况下，React 会在一个组件保持在同一位置时保留它的 state。通常这就是你想要的，所以把它作为默认特性很合理。但有时候，你可能想要重置一个组件的 state。
这种情况是不会重置的：
解决方案一：将组件渲染在不同的位置
解决方案二：使用 key 来重置 state
为被移除的组件保留 state
假如在一个真正的聊天应用中，你可能会想在用户再次选择前一个收件人时恢复输入 state。对于一个不可见的组件，有几种方法可以让它的 state “活下去”：
- 与其只渲染现在这一个聊天，你可以把 所有 聊天都渲染出来，但用 CSS 把其他聊天隐藏起来。这些聊天就不会从树中被移除了，所以它们的内部 state 会被保留下来。这种解决方法对于简单 UI 非常有效。但如果要隐藏的树形结构很大且包含了大量的 DOM 节点，那么性能就会变得很差。
- 你可以进行 状态提升 并在父组件中保存每个收件人的草稿消息。这样即使子组件被移除了也无所谓，因为保留重要信息的是父组件。这是最常见的解决方法。
- 除了 React 的 state，你也可以使用其他数据源。例如，也许你希望即使用户不小心关闭页面也可以保存一份信息草稿。要实现这一点，你可以让
Chat组件通过读取localStorage对其 state 进行初始化，并把草稿保存在那里。
总结
- 只要在相同位置渲染的是相同组件， React 就会保留状态。
- state 不会被保存在 JSX 标签里。它与你在树中放置该 JSX 的位置相关联。
- 你可以通过为一个子树指定一个不同的 key 来重置它的 state。
- 不要嵌套组件的定义，否则你会意外地导致 state 被重置。、
📎 参考文献
- 作者:NotionNext
- 链接:https://lsnx.top/article/preserving-and-resetting-state
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。