Question

我是React框架的新手，我开始使用它。我读到它有一个很好的差异算法。我想知道我可以在我的一个物体上使用它吗？并再次运行它并使用oldValue和newValue添加/删除/更改的内容得到一个结果对象？

谢谢团队

Answer 1

React本身不公开其差异算法，因为它与虚拟DOM实现紧密集成。

但是，有一些独立的NPM模块可以完全满足您的要求。例如，请查看flitbit/diff。

var diff = require('deep-diff');

var lhs = { a: 1, b: 2, c: 3 };
var rhs = { a: 1, b: 4, d: 5 };

var changes = diff(lhs, rhs);

// changes are
[
  { kind: 'E', path: [ 'b' ], lhs: 2, rhs: 4 },
  { kind: 'D', path: [ 'c' ] },
  { kind: 'N', path: [ 'd' ], rhs: 5 }
]

Answer 2

我可以像这样进行浅层比较：

你必须使用react-with-addons.js。

然后使用React.addons.shallowCompare函数。

第一个参数必须是具有两个键props和state的对象。然后第二个arg是在第一个arg中与props键进行比较的对象。第三个arg是在第一个arg中与state键进行比较的对象。因此，如果您想在React范围之外使用它，请忽略第三个arg并执行此操作：

var isDifferent = React.addons.shallowCompare({props:{a:1}}, {a:2});

这将返回true，因为a左侧为1，右侧为2。

var isDifferent = React.addons.shallowCompare({props:{a:1}}, {a:1});

这将返回false，因为它们都是相同的。

React，用它来区分对象

2 个答案: