强制更新是否像我认为的那样工作

Does forceUpdate not work like I think it does?

本文关键字：工作 更新 是否      更新时间：2023-09-26

以我在这里创建的非常简单的 react.js 应用程序为例

  <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()

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

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

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

你要找的是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()

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

相关文章：