无需重新渲染即可反应路由

Question

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

目前,我刚刚修补了路由器以公开一个只更新网址的方法,并且实际上没有点击路由特定的方法.这感觉很麻烦,并没有真正解决需要添加/删除某些组件(即小部件)的情况(至少它消除了知道哪些组件需要从路由器中呈现出来的责任),但是主要的UI不需要重新渲染.

所以这给我留下了三个问题:

1. 处理不需要更改组件的URL更改的React方法是什么？
2. 那些只添加/更改某些组件的网址更改呢？
3. 商店是否应负责发起路由事件？

Answer 1

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

这意味着您可以过度放弃而不会产生负面影响.这是来自Backbone的完整180,渲染非常昂贵,这导致你正在寻找的逻辑,即如何避免渲染.

在引擎盖下,React通过使用DOM来区分Virtual DOM来为您进行检查.换句话说:当你在React中使用公开的渲染函数时,你并没有真正渲染DOM,而只是用Javascript描述DOM的新状态.

实际上,这意味着如果您不计算多个值,则可以不加任何优化步骤,以每秒60帧的速度不断重新渲染.

这使您可以自由地完全"重新渲染",即使应用程序中只有很少的东西实际发生了变化.

所以我的建议是实际上不要尝试任何东西来阻止React重新渲染整个页面,即使没有任何变化.这种逻辑会增加复杂性,您可以通过无条件地重新路由路由更改来免费避免这种复杂性.从概念的角度来看,这也是有道理的,因为路线只是全局应用状态.

能够做到这一点的自由是使React变得令人敬畏的主要原因之一.

这是"过早优化是万恶之源"的典型案例.

例如:我有时会在mouseMove事件上全局重新呈现整个DOM层次结构,并且没有可观察到的性能影响.

作为一般规则,将重新定位视为零成本操作.现在你的React组件可能会有一些昂贵的操作.如果是这种情况,您可以使用React的生命周期方法按需执行这些操作.特别是看看shouldComponentUpdate,componentWillReceiveProps和 componentWillUpdate.

如果你正在使用Flux并坚持不变性范式,你可以对状态和道具进行非常便宜的参考平等检查,以便按需进行工作.有了这个,您可以提高性能.

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

在你的情况下,我会在根组件中注入路由状态,将它们作为props注入到根的子节点中,并在它们上实现shouldComponentUpdate以防止渲染.