forceUpdate 是否像我想的那样工作？

Question

使用非常简单的 react.js 应用程序 I created here

  <main></main>
  <section>
    <input value="abc" />
  </section>

..

data = note: ""
setNote = -> data.note = $('input').val()

display = React.createFactory React.createClass render: ->
  React.DOM.div null, "The note is:", @props.note

setNote()
rootComponent = React.render display(data), document.querySelector('main')

$('input').on 'keyup', -> 
  setNote()
  rootComponent.forceUpdate()

根据我的理解 of the documentation 当我输入输入时它应该设置 data.note （我已经验证它确实如此）并且因为 display 的 render 方法使用 note 属性，调用 rootComponent.forceUpdate 应该强制显示重新呈现并镜像输入中的文本。

但是它仍然只显示 data.note 的原始值。我误解了文档吗？

请注意，我知道这通常是您可能会使用助焊剂或回流的那种东西，虽然我很欣赏任何指向这些优秀教程的链接，但这是一次性的，我'我试图靠近这里的金属。

Answer 1

您要找的是setProps。这会将更新的数据传递给组件并触发重新渲染。

尝试：

$('input').on 'keyup', -> 
  setNote()
  rootComponent.setProps(data)

React 不得通过引用传递数据，这意味着当您的 data 变量更新时，组件会保留传递给它的原始实现。

编辑： 要回答您将 forceUpdate 用于什么的问题，请考虑以下更改后的示例：

data = note: ""
setNote = -> data.note = $('input').val()

display = React.createFactory React.createClass render: ->
    React.DOM.div null, "The note is:", data.note

setNote()
rootComponent = React.render (display()), document.querySelector('main')

$('input').on 'keyup', -> 
  setNote()
  rootComponent.forceUpdate()

现在请注意，数据并未传递给组件，而是在全局范围内引用。 forceUpdate 当您的渲染方法包含来自反应范围之外的数据时应该使用，并且何时需要重新渲染组件的决定被推迟到外部来源。

forceUpdate 是否像我想的那样工作？

Does forceUpdate not work like I think it does?

javascript

reactjs