javascript - IE11中的reactjs setState永远/阻塞UI

Question

我有这个逻辑，我必须在 IE11 (rip) 中支持，我从服务器获取大量 HTML

使用反应 16.5

一切都很好而且很花哨，直到我将它解析成一个列表，然后将解析后的列表设置为状态数组

我items作为道具传递给 List.jsx 组件

这里的问题是我在调用它的过程中和当我.map通过这个列表分析它时，它需要 GUI foreverrrr 来呈现并且它冻结了 UIrendersetState

所以我决定 react 不会偶尔产生以防止我猜的 UI 阻塞？

因此，在该组件中，我想像使用 jquery 一样return false在内部shouldComponentUpdate操作 DOM，并显式附加来自服务器的已解析项目，以便我可以在循环逻辑中产生。

如果您知道如何使用 React 解决 IE11 冻结问题，因为我无法使用虚拟列表，您会怎么做；所有项目都必须在 DOM 中，否则将使用虚拟列表。（除了重构整个页面逻辑我不能使用虚拟列表）

我是否应该setState多次调用，每次将更多内容附加到顶级状态的列表数组中，直到所有项目都被附加，这样它就可以处理由setState我的 List.jsx 组件或，或，或.. .

我会尝试编写一些代码示例

function getItems() {
   return [{item: '<tr><td>one</td></tr>', attributes: {}}, {item: '<tr><td>two</td></tr>', attributes: {}}]
}

class Parent extends React.Component {
    state = {
      items: [],
    }
    componentDidMount() {
      this.setState({
        items: getItems()
      })
    }

    render() {
       return (
           <List
             items={this.state.items}
           
           />

       )

    }
}

class List extends React.Component {
    render() {
        return (
          this.props.items.map((item, i) =>
              <tr
                  key={i}
              >
                  {i}
              </tr>
          )
        )

    }



}

任何建议都很棒，感谢您的宝贵时间！

标签： javascripthtmlreactjsinternet-explorer-11