国内flask做的网站,建设农场网站,乐装网,代做机械设计的网站参考文章
在组件间共享状态
有时候#xff0c;希望两个组件的状态始终同步更改。要实现这一点#xff0c;可以将相关 state 从这两个组件上移除#xff0c;并把 state 放到它们的公共父级#xff0c;再通过 props 将 state 传递给这两个组件。这被称为“状态提升”#…参考文章
在组件间共享状态
有时候希望两个组件的状态始终同步更改。要实现这一点可以将相关 state 从这两个组件上移除并把 state 放到它们的公共父级再通过 props 将 state 传递给这两个组件。这被称为“状态提升”这是编写 React 代码时常做的事。
状态提升
在这个例子中父组件 Accordion 渲染了 2 个独立的 Panel 组件。
Accordion PanelPanel
每个 Panel 组件都有一个布尔值 isActive用于控制其内容是否可见。
请点击 2 个面板中的显示按钮
import { useState } from react;function Panel({ title, children }) {const [isActive, setIsActive] useState(false);return (section classNamepanelh3{title}/h3{isActive ? (p{children}/p) : (button onClick{() setIsActive(true)}显示/button)}/section);
}export default function Accordion() {return (h2哈萨克斯坦阿拉木图/h2Panel title关于阿拉木图人口约200万是哈萨克斯坦最大的城市。它在 1929 年到 1997 年间都是首都。/PanelPanel title词源这个名字来自于 span langkk-KZалма/span哈萨克语中“苹果”的意思经常被翻译成“苹果之乡”。事实上阿拉木图的周边地区被认为是苹果的发源地i langlaMalus sieversii/i 被认为是现今苹果的祖先。/Panel/);
}我们发现点击其中一个面板中的按钮并不会影响另外一个他们是独立的。 假设现在想改变这种行为以便在任何时候只展开一个面板。在这种设计下展开第 2 个面板应会折叠第 1 个面板。该如何做到这一点呢”
要协调好这两个面板我们需要分 3 步将状态“提升”到他们的父组件中。
从子组件中 移除 state 。从父组件 传递 硬编码数据。为共同的父组件添加 state 并将其与事件处理函数一起向下传递。
这样Accordion 组件就可以控制 2 个 Panel 组件保证同一时间只能展开一个。
第 1 步: 从子组件中移除状态
将把 Panel 组件对 isActive 的控制权交给他们的父组件。这意味着父组件会将 isActive 作为 prop 传给子组件 Panel。先从 Panel 组件中 删除下面这一行
const [isActive, setIsActive] useState(false);然后把 isActive 加入 Panel 组件的 props 中
function Panel({ title, children, isActive }) {现在 Panel 的父组件就可以通过 向下传递 prop 来 控制 isActive。但相反地Panel 组件对 isActive 的值 没有控制权 —— 现在完全由父组件决定
第 2 步: 从公共父组件传递硬编码数据
为了实现状态提升必须定位到想协调的 两个 子组件最近的公共父组件
Accordion(最近的公共父组件) PanelPanel
在这个例子中公共父组件是 Accordion。因为它位于两个面板之上可以控制它们的 props所以它将成为当前激活面板的“控制之源”。通过 Accordion 组件将硬编码值 isActive例如 true 传递给两个面板
import { useState } from react;export default function Accordion() {return (h2哈萨克斯坦阿拉木图/h2Panel title关于 isActive{true}阿拉木图人口约200万是哈萨克斯坦最大的城市。它在 1929 年到 1997 年间都是首都。/PanelPanel title词源 isActive{true}这个名字来自于 span langkk-KZалма/span哈萨克语中“苹果”的意思经常被翻译成“苹果之乡”。事实上阿拉木图的周边地区被认为是苹果的发源地i langlaMalus sieversii/i 被认为是现今苹果的祖先。/Panel/);
}function Panel({ title, children, isActive }) {return (section classNamepanelh3{title}/h3{isActive ? (p{children}/p) : (button onClick{() setIsActive(true)}显示/button)}/section);
}可以尝试修改 Accordion 组件中 isActive 的值并在屏幕上查看结果。
第 3 步: 为公共父组件添加状态
状态提升通常会改变原状态的数据存储类型。
在这个例子中一次只能激活一个面板。这意味着 Accordion 这个父组件需要记录 哪个 面板是被激活的面板。可以用数字作为当前被激活 Panel 的索引而不是 boolean 值
const [activeIndex, setActiveIndex] useState(0);当 activeIndex 为 0 时激活第一个面板为 1 时激活第二个面板。
在任意一个 Panel 中点击“显示”按钮都需要更改 Accordion 中的激活索引值。 Panel 中无法直接设置状态 activeIndex 的值因为该状态是在 Accordion 组件内部定义的。 Accordion 组件需要 显式允许 Panel 组件通过 将事件处理程序作为 prop 向下传递 来更改其状态
PanelisActive{activeIndex 0}onShow{() setActiveIndex(0)}.../PanelPanelisActive{activeIndex 1}onShow{() setActiveIndex(1)}.../Panel
/现在 Panel 组件中的 button 将使用 onShow 这个属性作为其点击事件的处理程序
import { useState } from react;export default function Accordion() {const [activeIndex, setActiveIndex] useState(0);return (h2哈萨克斯坦阿拉木图/h2Paneltitle关于isActive{activeIndex 0}onShow{() setActiveIndex(0)}阿拉木图人口约200万是哈萨克斯坦最大的城市。它在 1929 年到 1997 年间都是首都。/PanelPaneltitle词源isActive{activeIndex 1}onShow{() setActiveIndex(1)}这个名字来自于 span langkk-KZалма/span哈萨克语中“苹果”的意思经常被翻译成“苹果之乡”。事实上阿拉木图的周边地区被认为是苹果的发源地i langlaMalus sieversii/i 被认为是现今苹果的祖先。/Panel/);
}function Panel({title,children,isActive,onShow
}) {return (section classNamepanelh3{title}/h3{isActive ? (p{children}/p) : (button onClick{onShow}显示/button)}/section);
}这样就完成了对状态的提升将状态移至公共父组件中可以让你更好的管理这两个面板。使用激活索引值代替之前的 是否显示 标识确保了一次只能激活一个面板。而通过向下传递事件处理函数可以让子组件修改父组件的状态。 受控组件和非受控组件
通常我们把包含“不受控制”状态的组件称为“非受控组件”。例如最开始带有 isActive 状态变量的 Panel 组件就是不受控制的因为其父组件无法控制面板的激活状态。
相反当组件中的重要信息是由 props 而不是其自身状态驱动时就可以认为该组件是“受控组件”。这就允许父组件完全指定其行为。最后带有 isActive 属性的 Panel 组件是由 Accordion 组件控制的。
非受控组件通常很简单因为它们不需要太多配置。但是当你想把它们组合在一起使用时就不那么灵活了。受控组件具有最大的灵活性但它们需要父组件使用 props 对其进行配置。
在实践中“受控”和“非受控”并不是严格的技术术语——通常每个组件都同时拥有内部状态和 props。然而这对于组件该如何设计和提供什么样功能的讨论是有帮助的。
当编写一个组件时应该考虑哪些信息应该受控制通过 props哪些信息不应该受控制通过 state。当然可以随时改变主意并重构代码。
每个状态都对应唯一的数据源
在 React 应用中很多组件都有自己的状态。一些状态可能“活跃”在叶子组件树形结构最底层的组件附近例如输入框。另一些状态可能在应用程序顶部“活动”。例如客户端路由库也是通过将当前路由存储在 React 状态中利用 props 将状态层层传递下去来实现的
对于每个独特的状态都应该存在且只存在于一个指定的组件中作为 state。这一原则也被称为拥有 “可信单一数据源”。它并不意味着所有状态都存在一个地方——对每个状态来说都需要一个特定的组件来保存这些状态信息。应该 将状态提升 到公共父级或 将状态传递 到需要它的子级中而不是在组件之间复制共享的状态。
你的应用会随着你的操作而变化。当你将状态上下移动时你依然会想要确定每个状态在哪里“活跃”。这都是过程的一部分
摘要
当想要整合两个组件时将它们的 state 移动到共同的父组件中。然后在父组件中通过 props 把信息传递下去。最后向下传递事件处理程序以便子组件可以改变父组件的 state 。考虑该将组件视为“受控”由 prop 驱动或是“不受控”由 state 驱动是十分有益的。
