Question

在我的React应用程序中，我有一个包含多个子组件的父组件：

$Components.ParentComponent = React.createClass({
  render: function() {
     return (
       <div>
         <$Components.FirstChildrenComponent />
         <$Components.SecondChildrenComponent />
       </div>
     );
  }
});

在我SecondChildrenComponent我使用componentDidMount(){ // start initializing some stuff }初始化一些长时间运行的操作。

问题是它只会在我ParentComponent中的所有其他组件被渲染后被触发。

我试图通过强制React在我的SecondChildrenComponent的任何其他组件之前呈现我的ParentComponent来找到改善性能/用户体验的方法，并在所有其他元素显示给用户正在渲染。

我的猜测是它与ReactDOM.render(<MyComponent />, node);

有关

也许我可以做类似的事情：

$Components.ParentComponent = React.createClass({
  render: function() {
     var secondComponent = ReactDOM.render(<$Components.SecondChildrenComponent />);

     return (
       <div>
        <$Components.FirstChildrenComponent />
        {secondComponent}
       </div>
     );
  }
});

但这只是一个伪代码，只是想知道是否有任何标准的解决方案。

Answer 1

据我所知，React将按照它们在渲染函数中出现的顺序渲染组件。据我所知，您的选择是：

1）首先在渲染功能中放置SecondChildrenComponent。任何布局问题都可以通过CSS修复，特别是如果你使用的是flexbox（由于其出色的'order'属性 - https://developer.mozilla.org/en-US/docs/Web/CSS/order）

2）将长时间运行的函数移动到父组件，并在组件componentWillMount()方法中调用它。当然，如果您的长期运行功能首先需要第二个子组件已完成安装，这将不起作用。

另外，React渲染函数只能返回一个根组件。您的初始示例包含两个。

在React

1 个答案: