不同分支上的组件如何相互更新
How can Components updated each other that are on different branches
如果单击 Button，我想更新 Diagram 组件。
我有以下结构：
+------+
-Layout|--\
-/+------+ |
-/ \
+-----/---+ +----|----+
| Sidebar | | Content |
+--|------+ +----|----+
/ \
+---|---+ +---|----+
|Button | |Diagram |
+-------+ +--------+
如果我按下按钮，图表应该会更新。我唯一的想法如何做到这一点如下：
- 我在
Layout 组件中定义了一个 changeDiagram() 函数。
- changeDiagram 函数将名为
type 的变量更改为值 'barChart'
- 我将
changeDiagram 作为参数传递给侧边栏。如果我单击按钮，changeDiagram 函数将被执行。
- 我将 Layout 组件中的
type 变量作为参数传递给 Content 组件。
- 内容组件呈现新图表
问题是我不想在Layout Component 中定义一个只负责Diagram 的函数。此外，Layout 和 Diagram 之间的每个组件都会被渲染，这不是必需的。
如何解决这个问题？我听说过 react-redux。我必须使用这个还是有其他解决方案？
没有 redux（或上下文 API）的唯一解决方案是 there
如果你只想渲染需要的组件，你将不得不使用 redux 及其商店。或者你必须使用 Context API
这个问题的答案与 React 的内在本质密切相关：
- React 项目使用称为组件的模块化单元。
- 组件是可嵌套和可重用的，一旦您开始组合它们，您将最终得到一个组件树，如图中所示。
- 这棵树在将其渲染到真实 DOM 之前通过虚拟 DOM 中的反应处理。
- React 使用所谓的 React State 来启动协调和差异算法，以了解它何时以及需要什么 re-render 组件树的某些分支。
有了这个前提，你就明白了，如果你想让你的 Button 触发 Diagram 的重新渲染，你需要 Button 来改变 Layout（这是较低的常见 Parent）或布局的 Parent 组件。这就是为什么 React re-render 具有 top-down 流程，例如，侧边栏中的状态更改将 re-render 仅侧边栏和按钮而不是布局。
- 有不同的可能方法来处理这个问题，选择取决于很多不同的方法 factors.Usually 在大型应用程序中，您有数百或数千个组件，并且您将有很多交互的方法对于相同的状态，使用 Redux 是最好的方法，因为它是目前最强大、经过测试和可靠的全局状态管理器之一。它解决了您的问题，因为使用 Redux 您将拥有更改全局状态的全局操作，因此您不必担心这些函数的声明位置或如何将它们传递给嵌套的 children，因为您可以从应用程序中的任何位置分派这些操作，您可以以相同的方式检索状态，而无需通过应用程序使用从 Parent 到 Child 的道具进行钻取。
- React 提供了一种工具，可以在您的组件中提供状态和处理程序，而无需通过您的组件和它的上下文来支持它们。上下文对于库或小型应用程序很有用，在这些应用程序中，Redux 或其他状态管理器只会向项目添加不必要的 deps。在任何情况下，上下文更改都会触发所有树的重新渲染，直至您的 child，您可以通过使用 React.memo() 包装器来避免中间重新渲染。
您可以查看 this 示例。
How to solve this problem? I heard of react-redux. Do I have to use this or are there other solutions?
所以，这取决于你，如果你计划有很多这样的场景，是的，你可能需要一个状态管理器，Redux、Recoil、Valtio、Zustand 等等。哪种更适合您的情况取决于多种因素，只需尝试一下，看看您更喜欢哪一种。
如果单击 Button，我想更新 Diagram 组件。
我有以下结构：
+------+
-Layout|--\
-/+------+ |
-/ \
+-----/---+ +----|----+
| Sidebar | | Content |
+--|------+ +----|----+
/ \
+---|---+ +---|----+
|Button | |Diagram |
+-------+ +--------+
如果我按下按钮，图表应该会更新。我唯一的想法如何做到这一点如下：
- 我在
Layout组件中定义了一个changeDiagram()函数。- changeDiagram 函数将名为
type的变量更改为值'barChart'
- changeDiagram 函数将名为
- 我将
changeDiagram作为参数传递给侧边栏。如果我单击按钮，changeDiagram 函数将被执行。 - 我将 Layout 组件中的
type变量作为参数传递给Content组件。 - 内容组件呈现新图表
问题是我不想在Layout Component 中定义一个只负责Diagram 的函数。此外，Layout 和 Diagram 之间的每个组件都会被渲染，这不是必需的。
如何解决这个问题？我听说过 react-redux。我必须使用这个还是有其他解决方案？
没有 redux（或上下文 API）的唯一解决方案是 there
如果你只想渲染需要的组件，你将不得不使用 redux 及其商店。或者你必须使用 Context API
这个问题的答案与 React 的内在本质密切相关：
- React 项目使用称为组件的模块化单元。
- 组件是可嵌套和可重用的，一旦您开始组合它们，您将最终得到一个组件树，如图中所示。
- 这棵树在将其渲染到真实 DOM 之前通过虚拟 DOM 中的反应处理。
- React 使用所谓的 React State 来启动协调和差异算法，以了解它何时以及需要什么 re-render 组件树的某些分支。
有了这个前提，你就明白了，如果你想让你的 Button 触发 Diagram 的重新渲染，你需要 Button 来改变 Layout（这是较低的常见 Parent）或布局的 Parent 组件。这就是为什么 React re-render 具有 top-down 流程，例如，侧边栏中的状态更改将 re-render 仅侧边栏和按钮而不是布局。
- 有不同的可能方法来处理这个问题，选择取决于很多不同的方法 factors.Usually 在大型应用程序中，您有数百或数千个组件，并且您将有很多交互的方法对于相同的状态，使用 Redux 是最好的方法，因为它是目前最强大、经过测试和可靠的全局状态管理器之一。它解决了您的问题，因为使用 Redux 您将拥有更改全局状态的全局操作，因此您不必担心这些函数的声明位置或如何将它们传递给嵌套的 children，因为您可以从应用程序中的任何位置分派这些操作，您可以以相同的方式检索状态，而无需通过应用程序使用从 Parent 到 Child 的道具进行钻取。
- React 提供了一种工具，可以在您的组件中提供状态和处理程序，而无需通过您的组件和它的上下文来支持它们。上下文对于库或小型应用程序很有用，在这些应用程序中，Redux 或其他状态管理器只会向项目添加不必要的 deps。在任何情况下，上下文更改都会触发所有树的重新渲染，直至您的 child，您可以通过使用 React.memo() 包装器来避免中间重新渲染。
您可以查看 this 示例。
How to solve this problem? I heard of react-redux. Do I have to use this or are there other solutions?
所以，这取决于你，如果你计划有很多这样的场景，是的，你可能需要一个状态管理器，Redux、Recoil、Valtio、Zustand 等等。哪种更适合您的情况取决于多种因素，只需尝试一下，看看您更喜欢哪一种。