做ui的网站,最专业企业营销型网站建设,网站设计班培训,一般的域名可以做彩票网站吗参考文章
对 state 进行保留和重置
各个组件的 state 是各自独立的。根据组件在 UI 树中的位置#xff0c;React 可以跟踪哪些 state 属于哪个组件。可以控制在重新渲染过程中何时对 state 进行保留和重置。
UI 树
浏览器使用许多树形结构来为 UI 建立模型。DOM 用于表示 …参考文章
对 state 进行保留和重置
各个组件的 state 是各自独立的。根据组件在 UI 树中的位置React 可以跟踪哪些 state 属于哪个组件。可以控制在重新渲染过程中何时对 state 进行保留和重置。
UI 树
浏览器使用许多树形结构来为 UI 建立模型。DOM 用于表示 HTML 元素CSSOM 则表示 CSS 元素。甚至还有 Accessibility tree
React 也使用树形结构来对创造的 UI 进行管理和建模。React 根据 JSX 生成 UI 树。React DOM 根据 UI 树去更新浏览器的 DOM 元素。React Native 则将这些 UI 树转译成移动平台上特有的元素。 state 与树中的某个位置相关联
当为一个组件添加 state 时可能会觉得 state “活”在组件内部。但实际上state 被保存在 React 内部。根据组件在 UI 树中的位置React 将它所持有的每个 state 与正确的组件关联起来。
下面只定义了一个 Counter / JSX 标签但将它渲染在了两个不同的位置
import { useState } from react;export default function App() {const counter Counter /;return (div{counter}{counter}/div);
}function Counter() {const [score, setScore] useState(0);const [hover, setHover] useState(false);let className counter;if (hover) {className hover;}return (divclassName{className}onPointerEnter{() setHover(true)}onPointerLeave{() setHover(false)}h1{score}/h1button onClick{() setScore(score 1)}加一/button/div);
}下面是它们的树形结构的样子 这是两个独立的 counter因为它们在树中被渲染在了各自的位置。 一般情况下不用去考虑这些位置来使用 React但知道它们是如何工作会很有用。
在 React 中屏幕中的每个组件都有完全独立的 state。举个例子当并排渲染两个 Counter 组件时它们都会拥有各自独立的 score 和 hover state。
试试点击两个 counter 会发现它们互不影响
import { useState } from react;export default function App() {return (divCounter /Counter //div);
}...如你所见当一个计数器被更新时只有该组件的状态会被更新 只有当在相同的位置渲染相同的组件时React 才会一直保留着组件的 state。想要验证这一点可以将两个计数器的值递增取消勾选 “渲染第二个计数器” 复选框然后再次勾选它
import { useState } from react;export default function App() {const [showB, setShowB] useState(true);return (divCounter /{showB Counter /} labelinputtypecheckboxchecked{showB}onChange{e {setShowB(e.target.checked)}}/渲染第二个计数器/label/div);
}...注意当停止渲染第二个计数器的那一刻它的 state 完全消失了。这是因为 React 在移除一个组件时也会销毁它的 state。 当重新勾选“渲染第二个计数器”复选框时另一个计数器及其 state 将从头开始初始化score 0并被添加到 DOM 中。 只要一个组件还被渲染在 UI 树的相同位置React 就会保留它的 state。 如果它被移除或者一个不同的组件被渲染在相同的位置那么 React 就会丢掉它的 state。
相同位置的相同组件会使得 state 被保留下来
在这个例子中有两个不同的 Counter 标签
import { useState } from react;export default function App() {const [isFancy, setIsFancy] useState(false);return (div{isFancy ? (Counter isFancy{true} / ) : (Counter isFancy{false} / )}labelinputtypecheckboxchecked{isFancy}onChange{e {setIsFancy(e.target.checked)}}/使用好看的样式/label/div);
}function Counter({ isFancy }) {const [score, setScore] useState(0);const [hover, setHover] useState(false);let className counter;if (hover) {className hover;}if (isFancy) {className fancy;}return (divclassName{className}onPointerEnter{() setHover(true)}onPointerLeave{() setHover(false)}h1{score}/h1button onClick{() setScore(score 1)}加一/button/div);
}当勾选或清空复选框的时候计数器 state 并没有被重置。不管 isFancy 是 true 还是 false根组件 App 返回的 div 的第一个子组件都是 Counter / 它是位于相同位置的相同组件所以对 React 来说它是同一个计数器。
注意 对 React 来说重要的是组件在 UI 树中的位置而不是在 JSX 中的位置 这个组件在 if 内外有两个return 语句它们带有不同的 Counter / JSX 标签
import { useState } from react;export default function App() {const [isFancy, setIsFancy] useState(false);if (isFancy) {return (divCounter isFancy{true} /labelinputtypecheckboxchecked{isFancy}onChange{e {setIsFancy(e.target.checked)}}/使用好看的样式/label/div);}return (divCounter isFancy{false} /labelinputtypecheckboxchecked{isFancy}onChange{e {setIsFancy(e.target.checked)}}/使用好看的样式/label/div);
}...可能以为当勾选复选框的时候 state 会被重置但它并没有这是因为 两个 Counter / 标签被渲染在了相同的位置。 React 不知道函数里是如何进行条件判断的它只会“看到”返回的树。在这两种情况下App 组件都会返回一个包裹着 Counter / 作为第一个子组件的 div。这就是 React 认为它们是 同一个 Counter / 的原因。
可以认为它们有相同的“地址”根组件的第一个子组件的第一个子组件。不管你的逻辑是怎么组织的这就是 React 在前后两次渲染之间将它们进行匹配的方式。
相同位置的不同组件会使 state 重置
在这个例子中勾选复选框会将 Counter 替换为一个 p
import { useState } from react;export default function App() {const [isPaused, setIsPaused] useState(false);return (div{isPaused ? (p待会见/p ) : (Counter / )}labelinputtypecheckboxchecked{isPaused}onChange{e {setIsPaused(e.target.checked)}}/休息一下/label/div);
}...
}示例中在相同位置对 不同 的组件类型进行切换。刚开始 div 的第一个子组件是一个 Counter。但是当切换成 p 时React 将 Counter 从 UI 树中移除了并销毁了它的状态。 并且当在相同位置渲染不同的组件时组件的整个子树都会被重置。要验证这一点可以增加计数器的值然后勾选复选框
import { useState } from react;export default function App() {const [isFancy, setIsFancy] useState(false);return (div{isFancy ? (divCounter isFancy{true} / /div) : (sectionCounter isFancy{false} //section)}labelinputtypecheckboxchecked{isFancy}onChange{e {setIsFancy(e.target.checked)}}/使用好看的样式/label/div);
}...当勾选复选框后计数器的 state 被重置了。虽然渲染了一个 Counter但是 div 的第一个子组件从 div 变成了 section。当子组件 div 从 DOM 中被移除的时候它底下的整棵树包含 Counter 以及它的 state也都被销毁了。 一般来说如果想在重新渲染时保留 state几次渲染中的树形结构就应该相互“匹配”。结构不同就会导致 state 的销毁因为 React 会在将一个组件从树中移除时销毁它的 state。
不应该把组件函数的定义嵌套起来
以下是为什么不应该把组件函数的定义嵌套起来的原因。
示例中 MyTextField 组件被定义在 MyComponent 内部
import { useState } from react;export default function MyComponent() {const [counter, setCounter] useState(0);function MyTextField() {const [text, setText] useState();return (inputvalue{text}onChange{e setText(e.target.value)}/);}return (MyTextField /button onClick{() {setCounter(counter 1)}}点击了 {counter} 次/button/);
}每次点击按钮输入框的 state 都会消失这是因为每次 MyComponent 渲染时都会创建一个 不同 的 MyTextField 函数。在相同位置渲染的是 不同 的组件所以 React 将其下所有的 state 都重置了。这样会导致 bug 以及性能问题。为了避免这个问题 永远要将组件定义在最上层并且不要把它们的定义嵌套起来。
在相同位置重置 state
默认情况下React 会在一个组件保持在同一位置时保留它的 state。通常这就是你想要的所以把它作为默认特性很合理。但有时候可能想要重置一个组件的 state。考虑一下这个应用它可以让两个玩家在每个回合中记录他们的得分
import { useState } from react;export default function Scoreboard() {const [isPlayerA, setIsPlayerA] useState(true);return (div{isPlayerA ? (Counter personTaylor /) : (Counter personSarah /)}button onClick{() {setIsPlayerA(!isPlayerA);}}下一位玩家/button/div);
}function Counter({ person }) {const [score, setScore] useState(0);const [hover, setHover] useState(false);let className counter;if (hover) {className hover;}return (divclassName{className}onPointerEnter{() setHover(true)}onPointerLeave{() setHover(false)}h1{person} 的分数{score}/h1button onClick{() setScore(score 1)}加一/button/div);
}目前当切换玩家时分数会被保留下来。这两个 Counter 出现在相同的位置所以 React 会认为它们是 同一个 Counter只是传了不同的 person prop。
但是从概念上讲这个应用中的两个计数器应该是各自独立的。虽然它们在 UI 中的位置相同但是一个是 Taylor 的计数器一个是 Sarah 的计数器。
有两个方法可以在它们相互切换时重置 state
将组件渲染在不同的位置使用 key 赋予每个组件一个明确的身份
方法一将组件渲染在不同的位置
如果想让两个 Counter 各自独立的话可以将它们渲染在不同的位置
import { useState } from react;export default function Scoreboard() {const [isPlayerA, setIsPlayerA] useState(true);return (div{isPlayerA Counter personTaylor /}{!isPlayerA Counter personSarah /}button onClick{() {setIsPlayerA(!isPlayerA);}}下一位玩家/button/div);
}...起初 isPlayerA 的值是 true。所以第一个位置包含了 Counter 的 state而第二个位置是空的。当你点击“下一位玩家”按钮时第一个位置会被清空而第二个位置现在包含了一个 Counter。 每次一个 Counter 被从 DOM 中移除时它的 state 就会被销毁。这就是每次点击按钮时它们就会被重置的原因。
这个解决方案在只有少数几个独立的组件渲染在相同的位置时会很方便。这个例子中只有 2 个组件所以在 JSX 里将它们分开进行渲染并不麻烦。
方法二使用 key 来重置 state
还有另一种更通用的重置组件 state 的方法。
可能在 渲染列表 时见到过 key。但 key 不只可以用于列表可以使用 key 来让 React 区分任何组件。默认情况下React 使用父组件内部的顺序“第一个计数器”、“第二个计数器”来区分组件。但是 key 可以让你告诉 React 这不仅仅是 第一个 或者 第二个 计数器而且还是一个特定的计数器——例如Taylor 的 计数器。这样无论它出现在树的任何位置 React 都会知道它是 Taylor 的 计数器
在这个例子中即使两个 Counter / 会出现在 JSX 中的同一个位置它们也不会共享 state
import { useState } from react;export default function Scoreboard() {const [isPlayerA, setIsPlayerA] useState(true);return (div{isPlayerA ? (Counter keyTaylor personTaylor /) : (Counter keySarah personSarah /)}button onClick{() {setIsPlayerA(!isPlayerA);}}下一位玩家/button/div);
}...在 Taylor 和 Sarah 之间切换不会使 state 被保留下来。因为 给他们赋了不同的 key
{isPlayerA ? (Counter keyTaylor personTaylor /) : (Counter keySarah personSarah /
)}指定一个 key 能够让 React 将 key 本身而非它们在父组件中的顺序作为位置的一部分。这就是为什么尽管用 JSX 将组件渲染在相同位置但在 React 看来它们是两个不同的计数器。因此它们永远都不会共享 state。每当一个计数器出现在屏幕上时它的 state 会被创建出来。每当它被移除时它的 state 就会被销毁。在它们之间切换会一次又一次地使它们的 state 重置。
注意请记住 key 不是全局唯一的。它们只能指定 父组件内部 的顺序。
使用 key 重置表单
使用 key 来重置 state 在处理表单时特别有用。
在这个聊天应用中 Chat 组件包含文本输入 state
// App.js
import { useState } from react;
import Chat from ./Chat.js;
import ContactList from ./ContactList.js;export default function Messenger() {const [to, setTo] useState(contacts[0]);return (divContactListcontacts{contacts}selectedContact{to}onSelect{contact setTo(contact)}/Chat contact{to} //div)
}const contacts [{ id: 0, name: Taylor, email: taylormail.com },{ id: 1, name: Alice, email: alicemail.com },{ id: 2, name: Bob, email: bobmail.com }
];// ContactList.js
export default function ContactList({selectedContact,contacts,onSelect
}) {return (section classNamecontact-listul{contacts.map(contact li key{contact.id}button onClick{() {onSelect(contact);}}{contact.name}/button/li)}/ul/section);
}// Chat.js
import { useState } from react;export default function Chat({ contact }) {const [text, setText] useState();return (section classNamechattextareavalue{text}placeholder{跟 contact.name 聊一聊}onChange{e setText(e.target.value)}/br /button发送到 {contact.email}/button/section);
}尝试在输入框中输入一些内容然后点击 “Alice” 或 “Bob” 来选择不同的收件人。会发现因为 Chat 被渲染在了树的相同位置输入框的 state 被保留下来了。
在很多应用里这可能会是大家所需要的特性但在这个聊天应用里并不是 不应该让用户因为一次偶然的点击而把他们已经输入的信息发送给一个错误的人。要修复这个问题只需给组件添加一个 key
Chat key{to.id} contact{to} /这样确保了当选择一个不同的收件人时 Chat 组件——包括其下方树中的任何 state——都将从头开始重新创建。 React 还将重新创建 DOM 元素而不是复用它们。
现在切换收件人就总会清除文本字段了
import { useState } from react;
import Chat from ./Chat.js;
import ContactList from ./ContactList.js;export default function Messenger() {const [to, setTo] useState(contacts[0]);return (divContactListcontacts{contacts}selectedContact{to}onSelect{contact setTo(contact)}/Chat key{to.id} contact{to} //div)
}const contacts [{ id: 0, name: Taylor, email: taylormail.com },{ id: 1, name: Alice, email: alicemail.com },{ id: 2, name: Bob, email: bobmail.com }
];摘要
只要在相同位置渲染的是相同组件 React 就会保留状态。state 不会被保存在 JSX 标签里。它与在树中放置该 JSX 的位置相关联。可以通过为一个子树指定一个不同的 key 来重置它的 state。不要嵌套组件的定义否则会意外地导致 state 被重置。
