javascript - React 中多个组件的渲染优先级

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(由于其出色的“顺序”属性 - https://developer.mozilla.org/en-US/docs/Web/CSS/order)

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

顺便说一句，React 渲染函数可能只返回一个 根组件。您的初始示例包含两个。