javascript - React 有没有办法在不构建虚拟树的情况下更新 DOM？

Question

想象一个包含 100 个项目的列表。有一个组件可以显示所有这些。每秒应多次将一个(随机)项目移动到新位置。 React naive 方法是通过构造虚拟树来重新渲染整个组件，然后将其与之前的副本进行比较，然后修补 DOM。问题是制作虚拟树和创建差异需要时间(在我的例子中大约 50 毫秒)。

React 有没有办法跳过虚拟树的创建并计算差异？如下所示:shouldComponentUpdate 将返回 false；然后手动将一个 Node 从 DOM 中删除，并插入到另一个位置。

更新

关于this video React 中存在最坏的情况。当您仅更新 100 项中的一项时。问题是如何以最快的方式更新 DOM(不比较 100 个项目)？

This is the demo对于这个问题，以及 this is the code .

Answer 1

您只需访问 componentDidMount 中的 DOM。

但是由于您遇到了性能问题。我会尝试让你的 child 渲染函数“纯粹”。您可以使用 PureRenderMixin ，但因为 mixins 可能不会留在你身边

从'react/lib/shallowEqual'导入shallowEqual;

然后在您的 shouldComponentUpdate 函数中执行

shouldComponentUpdate(nextProps, nextState) { return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState); }

另请考虑使用 Immutable-JS用于存放您的 100 件元素 Map因为它将最大限度地减少复制或缓存数据的需要。