问题标签 [reconciliation]

在和解期间，react 比较树并获得差异。当组件没有被记忆时，通过使用记忆钩子来减少这些差异是否有意义？

例子：

编辑：很高兴收到一些数字，例如以毫秒为单位的性能下降/改进，特别是对于本机反应。

我知道，当与从数组动态创建的子组件一起使用时，特殊的“键”道具有助于 React 唯一地识别组件并有效地呈现更新。但我想知道何时以及为什么需要将 key 道具用于“非动态”组件。

我的应用程序使用 Reducer 和 useContext 挂钩来管理功能组件A 的状态。状态对象最多有 3 层嵌套。组件 A 更新状态并将状态对象的一部分作为道具传递给子组件B的两个实例。B 使用这些道具来渲染一个开关组件和两个输入组件。这是此层次结构的简化代码。

组分 A：

B组份：

表格点击事件用于更新状态，组件 B 显示此选定项目的“设置”，用户可以使用组件 B 对其进行变异。

这是我面临的问题 - 当用户操作更新状态时（从表中选择一行，未在代码段中显示），我可以看到 A 和 B 在 react 开发人员工具中都收到了新数据，并且通过打印到控制台。但是，不会进行渲染以显示新数据。我想了解为什么会这样。

在查找了这个问题之后，我想我在实例化组件 B 时需要一个关键道具（答案没有清楚地解释为什么）。通过以下添加，这些值确实正确呈现。为什么这里需要一个键，为什么它只在键包含所有可以更改值的道具时才起作用？如果我只使用 uniqueId 作为键，则 value1 和 value2 不会再次正确呈现。如果我有很多更改道具，我是否也必须让他们添加密钥？没有更笨拙的方法吗？

更新的组件 A：

另外，我注意到虽然现在单击表格行会在组件 B 中呈现正确的值，但是单击到目前为止用户未更改的行会导致先前呈现的值保留在 Input1 和 Input2 组件上（而不是的空白）。所以我必须向输入添加键以及附加的启用状态，这解决了这个问题。

更新的组件 B：

再说一遍，为什么需要密钥？不反应发现道具已经改变并再次自动渲染？

我有一个包含大约 10,000 个列表的大型数组列表，我想最小化将对象渲染到当前列表。

我发现了几种解决方案，例如 react-window 或 react-virtualized 仅渲染可见组件，但它似乎不适合我当前的需求。

这 10,000 个项目会将某些事件传播到上层组件，为此我已经尝试过上下文，但它似乎会重新渲染每个孩子，即使其中一个项目触发了导致记忆地狱的功能。每个孩子和每个组件都被使用了不必要的记忆。

我已使用键和数组将对象数组简化为以下格式，以便快速处理

现在的问题是反应需要大约一秒钟来区分组件，这使得整个应用程序变慢。如果我去探查器，我发现阵列中的一个组件的反应大约需要 0.1 毫秒，结果是 0.1 * 10000 毫秒，这是太大的差异时间。我想记住这些组件，所以即使我在对象内添加或更新对象，它也只会区分该组件，而不是重新区分每个组件。

当单个组件将拥有自己的状态和进一步的子组件等等时，这很快就会增加。如果可能的话，我希望有一个有效的解决方案。

是否可以在一张表中比较 2 张表中的数据？

表格1

表 2

输出

UNION 将查询堆叠在顶部，因此最终会有 4 行 (1,2,1,3)。并且 INNER JOIN 可能不是最好的解决方案，因为我们不知道哪个表更长？

我有一个包含 2 个绝对位置元素的数组，它们是通过topCSS 属性布局的。top此外，还有一个与键挂钩的 CSS 过渡。当我交换元素位置时，一些元素（虽然键没有改变），html 元素被重新创建，因此 CSS 转换不会发生。

我已经创建了问题的代码框示例：https ://codesandbox.io/s/strange-framework-t2rq9

我有两个表（主表和辅助表），我们需要在这两个表之间进行行和列级别的协调，并汇总这些表之间的差异。

表 A：

表 B：

在上表中 col_A 是主键列。我想比较表 A 和表 B 并产生如下结果。

匹配行：2

不匹配的行数：1

列不匹配：col_C（示例键：四）

表 A 中存在但 B 中不存在的行数：0

表 B 中存在但 A 中不存在的行：1（示例键：九）

通常，表 A 和表 B 大约有。十亿行。在 Snowflake 中执行此操作的有效方法是什么。

我一直在尝试理解反应协调，并且对差异算法如何工作的一些细节感到非常困惑。到目前为止，我了解到每当进行更新时，我们都会创建一个新的反应元素树并将其与我们之前的反应元素树进行比较。diffing 算法管理查找新旧反应元素树之间的差异。算法的 2 个假设。是相同级别和类型的元素不需要卸载和重新安装，并且键提供了一种不通过索引识别子元素的方法。

让我困惑的部分是如何在 2 个反应实例之间进行比较。例如，<Comp1/> 在旧的 React 元素树和<Comp2/>新的 React 元素树中进行比较时（假设在创建新树时<Comp2>被替换<Comp1>），差异算法是否只是比较两个 React 元素的“类型”属性？因此，如果两者具有相同的“类型”，那么差异算法不会考虑卸载和安装到 DOM 中？

在处理嵌套的反应组件时，我正在努力理解协调是如何工作的。下面是我的 index.js 代码

下面是 index.html

让我感到困惑的部分是为什么每次单击按钮时所有反应实例都会继续卸载和重新安装。我的理解是，react 实例的“类型”不一样，因为我们在本地范围内定义了 Todo 组件TodoList 组件内部。因此，我们基本上每次在重新渲染期间都会创建一个新的 Todo 组件。但是，我觉得我的解释是一个非常高级的答案（另外，我什至不确定我是否正确）并且我不确定关于 react reconciler 如何管理差异的较低级别的实现细节当我们有嵌套组件和非嵌套组件时，反应实例的“类型”。（我使用术语“嵌套”和“非嵌套”来表示在另一个反应组件内部定义一个反应组件，就像我给出的示例中一样）。

我的要求：

我需要对两个数据进行协调，即.. 2 个单独的 Excel 工作表（Excel A 和 Excel B），我需要比较多个列并执行一些计算。基于此，我需要创建一个输出 excel（Excel C）。

我已经获得了 VS Studio 的许可，请帮助我解决此要求的最佳方法。我有以下疑问：

1. 我应该使用 C# 还是 Python（目前现有的是 C# 用于生成 Reports ）
2. 为了比较是否有必要在数据库中暂存这些表？如果是这样，使用哪一个？
3. 我们可以在不使用 DB Stage 的情况下继续进行对账吗？如果是这样，请建议最好的更简单的方法。

请建议。

我真的有信心在这里得到非常合适的解决方案。

再次感谢！

最好的，杰伊