Question

我有这段代码：

# app/assets/javascripts/components/records.js.coffee

  @Records = React.createClass
    ...
    render: ->
      React.DOM.div
        className: 'records'
        React.DOM.h2
          className: 'title'
          'Records'
        React.DOM.table
          className: 'table table-bordered'
          React.DOM.thead null,
            React.DOM.tr null,
              React.DOM.th null, 'Date'
              React.DOM.th null, 'Title'
              React.DOM.th null, 'Amount'
          React.DOM.tbody null,
            for record in @state.records
              React.createElement Record, key: record.id, record: record

关键支柱是什么？在React的反应数据处理过程中如何处理它？</ p>

Answer 1

key帮助React跟踪从多个渲染器中的数组渲染的组件，因为它可能会更改位置或添加到数组中/从数组中删除。例如，如果您首先渲染

的组件

[record3, record2, record1]

以后再渲染

[record4, record3, record2, record1]

React将天真地销毁所有组件并在其位置实例化和呈现新组件，因为React认为record3变为record4，record2变为record3，依此类推，并且record1被添加到最后。这会产生四个新组件，即使这些组件的shouldComponentUpdate会返回false：

record3   -change->   record4
record2   -change->   record3
record1   -change->   record2
          --add--->   record1

但是，如果您通过key属性唯一标识从每条记录呈现的组件，则React会识别出record4已添加到开头，从而允许父级更有效地重新呈现：

          --add--->   record4
record3    -same-     record3
record2    -same-     record2
record1    -same-     record1

如果子组件在某种程度上是有状态的，这一点尤其重要。

key属性也用于React的动画系统，以确定一个组件是否与另一个组件不同（因此应该转换为或转出）。

处理动态子项时的React键。它们适用于什么？他们是如何在幕后使用的？

1 个答案: