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

React组件:

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

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

阅读 4k
2 个回答

定义延迟加载的组件:

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>
)

采用上面的思路,B组件DidMount返回一个参数,在A中接受,然后显示C

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题