你将如何在 React JS 中实现自定义差异算法？答案

【问题标题】：How would you implement a custom diffing algorithm in React JS?你将如何在 React JS 中实现自定义差异算法？
【发布时间】：2022-12-11 08:11:26
【问题描述】：

免责声明：我不是在这里寻求完整的编码教程，而是寻求可以帮助我开发末端差异算法的理论或概念性答案。我非常了解 React JS 中的肮脏、差异和修补工作如何帮助组件重新渲染，当我说差异检查时，我并不是说 React 的内部差异算法有任何问题，因为 Stack Overflow 上有很多问题。

话虽如此，我只想开发某种东西来帮助我生成更新日志类型的数据。一个例子会好100倍.....

假设我有以下文件结构......
----> OrderComponent

----------> OrderDetailsForm

----------> OrderDelieveryForm
父组件 OrderComponent 具有 order 的状态，已作为 prop 在 OrderDetailsForm 和 OrderDelieveryForm 中传递。

现在 order 可以从所有三个组件更新，生成数据的最佳行动计划是什么，可以帮助我在该状态下完成所有更改？（可能是每个动作的对象数组）
Action 1: order.name, from "" to "ORDER400"
Action 2: order.lines.push(line_item)
Action 3: order.customer.name, from "Jake" to "Jones".
我怎样才能实现差异算法，然后让我生成一个像Order name has been set to "ORDER400", Order customer name has been updated from "Jake" to "Jones", 1 Order line has been added.这样的更新日志

事实上，我有一个全球 redux 商店设置，以防万一您的计划需要一个应用程序级商店。让我知道什么样的事情可能有助于实现这样的结果！

JFI：我有一些想法，我会发送一个带有变化的动作，然后深入合并两个对象，然后深入比较对象的变化。或者也许可以使用一些 HOC，然后可以将其包装在所有三个组件中。我不确定这里最好的电话是什么！

【问题讨论】：

标签： reactjs react-hooks logic

【解决方案1】：

我对以下两个非常小而快速的功能有很好的体验：

microdiff（无需推出自己的差异算法），这个很棒、小巧、快速，但如果你真的想要或需要编写自己的差异方法，你当然可以使用这个作为基础/灵感和根据您的需要进行调整：https://github.com/AsyncBanana/microdiff
micropatch 你基本上可以使用 microdiff-diff 的结果来修补一个对象，所以它们可以很好地协同工作：https://github.com/AsyncBanana/micropatch

用法非常简单，我觉得它可以满足您的要求：

const obj1 = {
    originalProperty: true,
};
const obj2 = {
    originalProperty: true,
    newProperty: "new",
};

console.log(diff(obj1, obj2));
// results in diff object: [{type: "CREATE", path: ["newProperty"], value: "new"}]

// if you want to create a merged object you can simply use diff
// in conjunction with patch like this:

state = patch(obj1, diff(obj1, obj2));
// results in merged object:
/* {
    originalProperty: true,
    newProperty: "new"
} */

所有学分归作者所有！

【讨论】：