Question

我正在用树制作一个应用程序，其中每个项目都具有10 ^深度的子元素（最大深度为5）。一切正常，但是我打开树枝越深，渲染它所需的时间就越多。在第5级，它甚至可以冻结。

这是我的代码：

      class TreeNode extends React.Component {

      constructor(props) {
          super(props)
          this.state = {
              expanded: false,
              depth: this.props.parentDepth + 1
          }
          this.treeExpand = this.treeExpand.bind(this);
      }

      treeExpand() {
          if (this.state.depth <= 5) {
              this.setState({
                  expanded: !this.state.expanded
              });
          }
      }

      prepareNodes(){
        if (this.state.expanded) {
            var tree = [];
            for (var i = 1; i < Math.pow(10, this.props.parentDepth + 1) + 1; i++) {
                tree.push(<TreeNode parentDepth={this.state.depth} selfNum={i} parentStack={this.props.parentStack+' > '+this.props.selfNum} />);
            }
            return <ul>{tree}</ul>;
        }else{
            return null;
        }
      }


      render() {
          return (
              <li key={this.props.parentStack+'-'+this.props.selfNum}>
                <span onClick={this.treeExpand}>
                   {(this.state.expanded ? '[-]' : '[+]')}
                   {this.props.selfNum}
                   ({this.props.parentStack})
                 </span>
                   {this.prepareNodes()}
                 </li>
          );
      }
  }

  class TreeSection extends React.Component {

      constructor(props) {
          super(props)
      }


      render() {
          var tree = [];
          for (var i = 1; i < 11; i++) {
              tree.push(<TreeNode parentDepth={1} selfNum={i} parentStack={'root'}/>);
          }
          return (
              <ul>
                {tree}
              </ul>
          );
      }
  }


  ReactDOM.render(
      <TreeSection />,
      document.getElementById('root')
  );

Image: expanded tree view

我认为这可能是由于prepareNodes（）函数返回的数组太大所致。如何解决？我是React的新手。

Answer 1

在不知道更多细节的情况下，我可以说，肯定有很多节点可以将对象分解为逻辑段。如果数据量很大，则服务器需要对数据进行分页-浏览器（和计算机）只能处理这么多数据。通过提供的信息，我认为这不是前端问题，而是您如何将数据提供给前端。

尝试添加百万个元素时，React冻结

1 个答案: