不同分支上的组件如何相互更新

如果单击Button，我想更新Diagram组件。我有以下结构：

+------+                          
-Layout|--                       
-/+------+   |                      
-/                                   
+-----/---+       +----|----+                
| Sidebar |       | Content |                
+--|------+       +----|----+                
/                                         
+---|---+             +---|----+               
|Button |             |Diagram |               
+-------+             +--------+

如果我按下按钮，图表应该会更新。我唯一的想法如何做到这一点是：

我在Layout组件中定义了一个changeDiagram()函数。
- changeDiagram函数将名为type的变量更改为值'barChart'
我将changeDiagram作为参数传递给侧边栏。如果我点击按钮，changeDiagram函数就会变得异常
我将Layout组件中的type变量作为参数传递给Content组件
内容组件呈现新的关系图

问题是我不想定义一个只负责布局组件内的关系图的函数。此外，Layout和Diagram之间的每个组件都会被渲染，这是不必要的。

如何解决这个问题？我听说过react redux。我必须使用这个还是有其他解决方案？

这个问题的答案与React的内在本质有着深刻的联系：

React项目使用称为Components的模块化单元

组件是可嵌套和可重用的，一旦你开始编写它们，你就会得到一个组件树，就像你在照片中看到的那样

该树在虚拟DOM中通过react进行处理，然后将其呈现为真实DOM

React使用其所谓的React State来启动协调和困难算法，以了解何时以及如何重新呈现组件树的某些分支

有了这个前提，你就明白了，如果你想让你的按钮触发Diagram的重新发布，你需要按钮来更改Layout(这是较低的公共父级(或Layout的父级组件中的React状态。这就是React使用自上而下的流程重新渲染的原因，例如，边栏中的状态更改将只重新渲染边栏和按钮，而不重新渲染布局。

有不同的可能方法来处理这一问题，选择取决于许多不同的因素。通常在有数百或数千个组件的大型应用程序上，您将有许多方法与同一状态交互，使用Redux是最好的方法，因为它是最强大、最经过测试和最可靠的全局状态管理器之一。它解决了您的问题，因为使用Redux，您将拥有更改全局状态的全局操作，因此您不必担心这些函数在哪里声明，也不必担心如何将它们传递给嵌套的子级，因为您可以从应用程序中的任何位置调度这些操作，并且您可以以相同的方式检索状态，而无需通过应用程序使用从Parent到Child的道具对其进行钻取
React提供了一种工具，可以在组件中提供状态和处理程序，而不必在组件及其上下文中对它们进行支撑钻取。上下文对于库或小型应用程序非常有用，在这些应用程序中，Redux或其他状态管理器只会向项目添加不必要的dep。在任何情况下，上下文的更改都会触发所有树的重新发布，直到您的孩子，您可以使用React.memo((包装器来避免中间的重新发布。
您可以查看此示例

如何解决此问题？我听说过react redux。我必须使用这个还是有其他解决方案？

所以，这取决于你，如果你计划有很多这样的场景，是的，你可能需要一个状态管理器，Redux、Recoil、Valtio、Zustand，它们有很多。什么更适合你的情况取决于许多因素——试一下，看看你更喜欢哪一个。

唯一没有redux(或上下文API(的解决方案是存在

如果只想渲染所需的组件，则必须使用redux及其存储。或者你必须使用上下文API

相关内容

最新更新

热门标签：