react虚拟dom 庞大后需要优化

在 React 中，每次 setState ， Virtual DOM 会计算出前后两次虚拟 DOM 对象的区别，再去修改真实需要修改的 DOM。由于 js 计算速度很快，而操作真实 DOM 相对比较慢，Virtual DOM 避免了没必要的真实 DOM 操作，所以 React 性能很好。但随着应用复杂度的提升， DOM 树越来越复杂，大量的对比操作也会影响性能。比如一个 Table 组件，修改其中一行 Tr 组件的某一个字段， setState 后，其他所有行 Tr 组件也都会执行一次 render 函数，这其实是不必要的。我们可以通过 shouldComponentUpdate 函数决定是否更新组件。大部分时候我们是可以知道哪些组件是不会变的，根本就没必要去计算那一部分虚拟 DOM。