Reactjs 如何在不等待所有儿童上马的情况下提前取车？

我有以下组件结构：

<A>
  <B>
    <C/>
  </B>
</A>

：

子组件的componentDidMount（）方法在父组件的方法之前被调用

因此，只有在装入并呈现
A
、
B
和
C
之后，才会进行抓取

因为在我们的例子中，
A
具有深度嵌套的组件，所以获取需要等待所有呈现和装载的组件

有什么方法可以提前提取吗？
如果您想继续使用React的生命周期方法，一个好的选择是在调用componentDidMount并完成数据提取之前不呈现此组件的子组件。您可以使用
setState
来管理此操作

或者，您可以考虑在React生命周期之外进行数据获取。这是一个很好的选择，具体取决于您使用的状态管理解决方案的类型和应用程序的总体架构。
我们按照上面评论部分中的@Julien Bourdic和@Jayavel建议提高了性能，最多快了2秒：

      state = {
        isReady: false
      }

      componentDidMount() {
        fetch();
        this.setState({ isReady: true });
      }

      render() {
        return this.state.isReady ? <Wrapped {...this.props} /> : null;
      }

状态={
伊斯雷迪：错
}
componentDidMount（）{
fetch（）；
this.setState（{isReady:true}）；
}
render（）{
返回this.state.isReady？：空；
}

基本上，我们在抓取未完成时渲染
null
。这样，组件
B
和
C
将不会被装载和呈现，从而允许
A
的
componentDidMount
（和
fetch
）提前启动

子组件的componentDidMount（）方法在父组件的方法之前被调用

在执行异步操作时，显示加载微调器或其他内容，直到获取所有信息，如下所示：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      data: [],
      isLoading: true
    };
  }

  componentDidMount() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data =>
        this.setState(() => {
          return { data , isLoading: false};
        })
      );
  }

  render() {
    if (this.state.isLoading) {
      return <p>Loading ...</p>; // initially isLoading is true, it renders a loading after fetch components will render
    }
    return (
      <div>
      <ul>
        {this.state.data.map(data => {
          return <li key={data.username}>{data.username} </li>
        })}
      </ul>
        <Hello name={this.state.name}>
          <p>
            Start editing to see some magic happen :)
          </p>
        </Hello>

      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：'反应'，
数据：[]，
孤岛加载：正确
};
}
componentDidMount（）{
取回（“https://jsonplaceholder.typicode.com/users")
.then（response=>response.json（））
。然后（数据=>
此.setState（（）=>{
返回{data，isLoading:false}；
})
);
}
render（）{
if（此.state.isLoading）{
returnLoading…
；//初始isLoading为true，它在获取组件渲染后渲染加载
}
返回(

{this.state.data.map（数据=>{
return
{data.username}
})}


开始编辑以查看发生的奇迹：）

);
}
}

未测试：如果您在上使用组件willmount

，会怎么样？因为在React 17中它将被弃用。我认为，

componentWillMount

不是为这种taskSecond解决方案而设计的：状态为a，简单的if<代码>如果（this.state.isLoading==false）{}。我用了这个（糟糕的）解决方案。将在

isLoading

状态下自动重新加载update@JulienBourdic有趣的工作，你会尝试寻找这样的解决方案吗？恐怕不推荐这样做？=>“避免在构造函数中引入任何副作用或订阅。对于这些用例，请改用componentDidMount（）。”虽然不是，但您明确希望避免使用推荐的方法，因此不会有很好的解决方案。作为替代方案，您可以完全在React生命周期之外进行抓取，尽管这在很大程度上取决于应用程序的结构。