reactjsdom呈现延迟

我在强制DOM在其父React元素发生更改之前在子React元素中进行更改时遇到了问题

情况是这样的：

我有一个包含列和行的网格表，然后我有一个过滤器元素，它是一个下拉菜单，允许用户按所需值过滤网格中的行（即，如果用户在过滤器菜单中选择“活动”，则仅显示具有“活动”值的行）

问题是，当我单击过滤器菜单中的输入时，组件似乎在反射DOM更改（过滤器菜单中的背景更改）之前等待父网格中的过滤完成。这意味着如果我点击一个过滤选项，在我应用到选中选项的CSS类被应用之前会有一个延迟

代码如下所示：

var Grid = React.createClass({
  getInitialState: function () {
    return {
      rows: _.map(_.range(100000), function (i) {
          var state = (i % 2 == 0) ? 'active' : 'inactive';
          return {column1: state, column2: i};
      })
    };
  },

  _renderRows: function (rows) {
    return this.state.rows.map(function(row) {
      return <tr><td>{row.column1}</td><td>{row.column2}</td></tr>
    });
  },

  // For the sake of simplicity let's just say we can only filter on the
  // values for column1
  _onFilterChange: function(value) {
    this.setState({
      rows: this.state.rows.filter(function (row) { return row.column1 === value })
    });
  },

  render: function () {
    return (
      <div>
        <Filter
          handleFilterChange={this._onFilterChange}
        />
        <table>
          <tbody>
            {this._renderRows(this.state.rows)}
          </tbody>
        </table>
      </div>
    );
  }
});

var Filter = React.createClass({
  getInitialState: function () {
    return {
      selected: {
        active: false
      }
    };
  },

  componentDidUpdate: function (prevProps, prevState) {
    if (this.state.selected !== prevState.selected) {
      var value = (this.state.selected['active']) ? 'active' : 'inactive';
      this.props.handleFilterChange(value);
    }
  },

  _handleFilterChange: function (value, e) {
    optionSelected = {}
    optionSelected[value] = e.target.checked;
    var newSelected = React.addons.update(this.state.selected, {$merge: optionSelected});

    // This should cause a re-render of everything
    this.setState({
      selected: newSelected,
    });
  },

  render: function () {
    return (<ul>
      <li>
        <input
          id='active'
          type='checkbox'
          value='active'
          checked={this.state.selected['active']}
          onChange={this._handleFilterChange.bind(this, 'active')}
        />
        <label htmlFor='active'>Active</label>
      </li>
    </ul>);
  },
});

var Grid=React.createClass({
getInitialState:函数（）{
返回{
行：\映射（\范围（100000），函数（i）{
变量状态=（i%2==0）？“活动”：“非活动”；
返回{column1:state，column2:i}；
})
};
},
_renderRows:函数（行）{
返回此.state.rows.map（函数（行）{
返回{row.column1}{row.column2}
});
},
//为了简单起见，我们只能在
//第1列的值
_onFilterChange：函数（值）{
这是我的国家({
行：this.state.rows.filter（函数（行）{return row.column1==value}）
});
},
渲染：函数（）{
返回(
{this.\u renderRows（this.state.rows）}
);
}
});
var Filter=React.createClass({
getInitialState:函数（）{
返回{
选定：{
活动：错误
}
};
},
componentDidUpdate:函数（prevProps、prevState）{
如果（this.state.selected！==prevState.selected）{
var值=（this.state.selected['active']）？'active'：'inactive'；
this.props.handleFilterChange（值）；
}
},
_handleFilterChange:函数（值，e）{
选项Selected={}
选项Selected[值]=e.target.checked；
var newSelected=React.addons.update（this.state.selected，{$merge:optionSelected}）；
//这将导致重新渲染所有内容
这是我的国家({
精选：新闻精选，
});
},
渲染：函数（）{
返回（


活跃的

）；
},
});

---

在父网格中执行过滤功能之前，是否有任何方法强制过滤器菜单呈现其DOM/应用CSS类？

将

this.props.handleFilterChange（值）放入setTimeout

中调用code>可能会起到作用（即使它不漂亮）。使用setTimeout有效！但它绝对不漂亮。。。如果没有其他答案，我可能最终会使用它。我想问题在于浏览器没有足够的时间重新绘制

setTimeout

将昂贵的筛选操作移动到下一个刻度。奇怪的是，我在componentDidUpdate中调用this.props.handleFilterChange，根据React文档，这是在刷新DOM后发生的，所以我不完全清楚setTimeout为什么有效，但将它放在componentDidUpdate中不会影响DOM已更新但尚未重新绘制。不过我不确定。