刷新反应组件或通量/减少中的逻辑？

Posted 2023-02-22

【中文标题】刷新反应组件或通量/减少中的逻辑？

【英文标题】：Refresh logic in react component or flux/redux?

【发布时间】：2016-02-13 14:57:06

【问题描述】：

所以我对 React 还很陌生，我无法理解如何基于另一个组件重新渲染主要组件的概念。

假设我们有一个待办事项应用程序，一个待办事项可以有一个状态（新建、运行、关闭）。我们在列表中显示所有待办事项，我们可以根据它们的状态过滤这些项目。我们使用类似组件的引导下拉按钮来设置过滤器，它是一个 React 组件。现在，当我们更改过滤器时，我们显然想要刷新待办事项。

我的问题是，选择状态的逻辑是属于 Flux/Redux 还是过滤器组件只是对主组件说“刷新你的项目”？

【参考方案1】：

当您在 React 应用程序中使用 Redux 时，请遵循一个简单规则 - 您的所有组件都是无状态（意味着，没有组件初始化其状态或在任何地方调用 .setState()） .

基于state container 的redux 设计方式，一个big 对象包含所有应用程序状态。作为 React 组件，作为 connected 到 Redux 存储，Redux 会将状态（或它的一部分）传递给该组件，作为 this.props.state 属性。

那个高阶组件（或智能组件）渲染其子组件（或哑组件）并处理来自它们的事件。

如果子组件需要更改，它会触发相应的处理程序（通常以props 传递）。改变状态的唯一方法是发送一个动作。该动作包含一个类型和一个有效负载，并根据该类型选择相应的 reducer。然后，reducer 根据之前的状态和操作负载生成一个新状态。

如果在 reducer 调用的结果中，状态发生了变化，Redux 将重新渲染高阶组件，并在属性中传递新的状态。所以，所有子组件都会相应更新。

检查此example 并跟踪AddTodo 组件如何调用.handleClick()，然后向上调用.onAddClick()，后者调度了一个动作。

【讨论】：

请注意，它没有有是一个容器组件（又名智能组件）。应用中可以有很多容器组件。

很抱歉提出旧话题，@DanAbramov 也许你可以帮助我理解这一点。高阶组件究竟是如何重新渲染的？我见过你subscribed 到高阶组件，但我在其他教程或种子项目的任何地方都看不到它。 connect 会为我们神奇地做到这一点吗？如果是这样，是重新渲染的只是组件还是整个应用程序？

我想我现在明白了。 connect 实际上是订阅应用程序的 state 并在 redux 商店的 state 更改时强制更新，这也应该澄清我的后一个疑问。

【参考方案2】：

如果您使用的是 redux，那么在您的下拉列表中，您应该有一个 onchange 处理程序，该处理程序在每次使用选定状态（新建、运行、关闭）更改值时调度一个操作。

Redux reducer 将通过相应地更改 store 中的某些状态来处理此操作，例如：display = 'completed'。除此之外，你的待办事项列表也应该存储在 store 中，它很可能是一个数组。

你的 react 组件应该收到一个 todo 数组并显示为 props，因此每次任何 prop（todo 数组或显示）更改时，都会触发重新渲染。

在这种情况下，您的组件应该只显示那些已完成的待办事项（即在渲染中检查每个待办事项的状态是否 === this.props.display。

所以回答你的问题：redux 保持下拉列表的状态，它被传递给你的主组件，然后你的主组件只呈现符合条件的待办事项。

【参考方案3】：

因此，您可以以一种非常简单的方式将一个函数向下传递给选择框，该选择框在***组件上调用setState。当该状态发生变化时，它将重新渲染其子组件。这种模式不能很好地扩展，并导致 React + Flux 试图让我们远离（无处不在的状态）。我想说的是，使用 Flux（或者更好的是 Redux），触发一个在你的商店中设置过滤器的操作，并使用基于过滤器状态的派生数据 + 你在待办事项列表中的待办事项列表。

【讨论】：

是的，我也是这么想的，但是用在这么小的东西上似乎有点过头了。我没有想过拥有很多这样的组件，我想当你这样想的时候，把这个逻辑放在 redux 中更有意义。