反应路线而不重新渲染

Question

所以我有一个简单的React/Flux应用程序使用Backbone的路由器。我有一个用户创建对象的情况，路径从/object/new更新为/object/:id。但是，不需要重新呈现页面，因为组件是相同的，并且由于在ajax-create调用返回后关联的商店更新，它会自行更新。

目前，我刚刚修补了路由器以暴露一个方法，只是更新网址，并没有实际打到路由特定的方法。这感觉很不好，并没有真正解决需要添加/移除一些组件（即，小部件）的情况（至少它消除了知道哪些组件需要被呈现在路由器外的责任），但是主要UI不需要重新渲染。

因此，这让我有三个问题：

1. 什么是处理不需要更改组件URL的变化做出反应呢？
2. 那么只能添加/更改某些组件的url更改呢？
3. 商店应负责发起路由事件吗？

Answer 1

React的一个主要价值主张是重新渲染非常便宜。

这意味着您可以放弃过度而没有负面影响。这是来自Backbone的完整的180，其中渲染非常昂贵，这导致您正在寻找的逻辑，即如何避免渲染。

在引擎盖下，React是否通过将虚拟DOM与DOM区分开来检查你。换句话说：当您在React中使用暴露的渲染函数时，您并不真正渲染DOM，而只是用Javascript描述DOM的新状态。

实际上，这意味着如果您不计算许多值，您可以不停地以每秒60帧的速度重新渲染，而无需执行任何优化步骤。

这使您可以自由地完全“重新呈现”，即使您的应用中只有极少数事情实际发生了变化。

因此，我的建议是实际上不尝试阻止React重新渲染整个页面，即使没有任何更改。这种逻辑会增加复杂性，您可以通过无条件地重新修改路由更改来避免这种复杂性。从概念的角度来看，这也是有意义的，因为路由只是全局应用状态。

能够做到这一点的自由是使React真棒的主要原因之一。

这是“过早优化是万恶之源”的经典案例。

例如：我有时会全局重新渲染mouseMove事件上的整个DOM层次结构，并且没有可观察到的性能影响。

作为一般规则，将再投放看作零成本操作。现在，您可能会在React组件中执行一些昂贵的操作。如果是这种情况，您可以使用React的生命周期方法按需执行这些操作。特别看看shouldComponentUpdate,componentWillReceiveProps and componentWillUpdate。

如果您使用Flux并且坚持不变性范例，那么您可以做出非常便宜的参考性状态平等检查和支持按需工作的道具。有了这个，你可以提高性能。

随着shouldComponentUpdate方法，如果它需要太多的计算能力，您可以阻止渲染调用。但是，如果由于您自己实施的昂贵操作而导致性能提高，我只会这样做。

在你的情况下，我会在根组件中注入路由状态，将它们作为道具注入到根的孩子中，并在其上执行shouldComponentUpdate以防止呈现。