Question

我想动态顺序渲染 React组件，而无需使先前的组件卸载/重新安装DOM。

让我更具体些，在<ComponentB />渲染/安装完成之前，我不希望<ComponentA />渲染

这是我手动执行的操作：

class App extends Component {
  constructor(props){
    super()

    this.state = {
      finishedMounting: false
    }
  }

  isMounted(){
    this.setState({finishedMounting: true})
  }

  renderComponentA(){
    return <ComponentA isMounted={() => this.isMounted()}/>
  }

  renderComponentB(){
    if(this.state.finishedMounting){
       return <ComponentB />
    }
  }

  render(){
    return(
      <div>
        {this.renderComponentA()}
        {this.renderComponentB()}
      </div>
    )
  }
}

然后在<ComponentA />

componentDidMount(){
  this.props.isMounted()
}

请不要使用循环并返回所有组件的数组作为响应。即同时安装所有组件。那不是我要问的不是。

只有ComponentA完成渲染后，ComponentB才能启动。

问题：如果我有需要依次渲染的 X 组件，该如何动态地执行此操作？

注意：之所以这样做，是因为ComponentA和ComponentB占用了大量资源。我需要先ComponentA才能显示。但这只是一个例子。我在现实世界中的场景不只是两个组成部分。

顺序渲染React组件而无需重新渲染

0 个答案: