React组件的多个子组件渲染时能否优先渲染某子组件

Question

React组件:

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

A 变化更新时, B 和 C 的render也都同时执行了, render执行完了过了一两秒, B 和 C才渲染展示出来.
当然这是由于C组件内容特别多, 所以渲染出来很慢, 导致B组件也渲染出来的也很慢, 请问有没有办法让B优先渲染展示出来 ?

Answer 1

定义延迟加载的组件：

import React from 'react';
import PropTypes from 'prop-types';
class Delayed extends React.Component {
    constructor(props) {
        super(props);
        this.state = {hidden : true};
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({hidden: false});
        }, this.props.waitBeforeShow);
    }
    render() {
        return this.state.hidden ? '' : this.props.children;
    }
}
Delayed.propTypes = {
  waitBeforeShow: PropTypes.number.isRequired
};
export default Delayed;

使用方式：

import Delayed from '../Time/Delayed';
import React from 'react';

const myComp = props => (
  <Delayed waitBeforeShow={500}>
     <div>Some child</div>
  </Delayed>
)