使用带骨干反应过来的时候我能避免forceUpdate（）？ [英] Can I avoid forceUpdate() when using React with Backbone?

问题描述

的Facebook阵营 <一个href=\"http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html#what-components-should-have-state\">encourages您分离可变（状态）和不可变的（道具）的状态：

Facebook React encourages you to separate mutable (state) and immutable (props) state:

尽量保持尽可能多的部件尽可能无国籍。通过这样做，你将状态隔离到其最合乎逻辑的地方，并尽量减少冗余，从而更容易推理您的应用程序。

Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

在状态的改变，你应该打电话给 的setState 触发虚拟DOM差异，这将导致该只需要在一个真实的DOM更新。

When the state changes, you are supposed to call setState to trigger virtual DOM diff, which will cause a real DOM update only when this is needed.

有是的一种方法，通过调用手动触发DOM更新<一个href=\"http://facebook.github.io/react/docs/component-api.html#forceupdate\"><$c$c>forceUpdate但气馁：

There is a way to trigger DOM update manually by calling forceUpdate but it is discouraged:

通常您应该尽量避免的 forceUpdate（） 并只能从读 this.props 和 this.state 在渲染（）。这使得你的应用程序更简单，更高效。

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render(). This makes your application much simpler and more efficient.

不过，所有阵营+骨干的例子我见过的忽略了这个建议和存储模型和集合在道具并调用 forceUpdate ：

However, all React+Backbone examples I have seen ignore this advice and store models and collections in props and call forceUpdate:

• http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html


• https://github.com/usepropeller/react.backbone/blob/master/react.backbone.js


• https://gist.github.com/ssorallen/7883081


• http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/

• http://www.thomasboyt.com/2013/12/17/using-reactjs-as-a-backbone-view.html
• https://github.com/usepropeller/react.backbone/blob/master/react.backbone.js
• https://gist.github.com/ssorallen/7883081
• http://eldar.djafarov.com/2013/11/reactjs-mixing-with-backbone/

即使阵营自己的例子使用 forceUpdate ：

Even React's own example uses forceUpdate:

• https://github.com/facebook/react/blob/master/examples/todomvc-backbone/js/app.js#L148

有没有更好的办法，虽然，它会给什么好处呢？

Is there a better way, though, and what benefits would it give?

推荐答案

皮特的回答是伟大的。

骨干模型本质上是变化的，这（虽然本身不​​是一个问题）指重新描绘时，你不会有旧版本的模型来比较。这使得它很难通过定义<一个做智能优化技术href=\"http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate\"><$c$c>shouldComponentUpdate在您的组件键位的方法。 （你也失去了轻松存储你的模型等原因的旧版本的能力，如实施撤消。）

Backbone models are inherently mutative, which (while not a problem in itself) means that when rerendering, you won't have the old version of the model to compare to. This makes it harder to do intelligent optimizations by defining shouldComponentUpdate methods in key places on your components. (You also lose out on the ability to easily store old versions of your model for other reasons, like implementing undo.)

调用 forceUpdate 仅仅跳过 shouldComponentUpdate 并强制重新呈现的组件。请注意，调用渲染通常是便宜，并作出反应仍然只触及DOM如果的输出渲染已经改变，所以这里的性能问题并不常见。但是，如果你有使用一成不变的数据（包括原料周围模型属性对象传递从的toJSON（）皮特建议）的选择，我强烈推荐它。

Calling forceUpdate merely skips shouldComponentUpdate and forces the component to rerender. Note that calling render is usually cheap, and React will still only touch the DOM if the output of render has changed, so performance problems here aren't common. However, if you have the choice to use immutable data (including passing around raw model property objects from toJSON() as Pete suggests), I'd highly recommend it.

这篇关于使用带骨干反应过来的时候我能避免forceUpdate（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！