在componentDidMount()之前调用react render()

Question

在我componentDidMount()进行API调用以获取一些数据时,此调用然后设置我在渲染中使用的状态对象.

componentDidMount() {
            const { actions } = this.props;

            this.increase = this.increase.bind(this);

            // api call from the saga
            actions.surveyAnswersRequest();

            // set breadcrumb
            actions.setBreadcrumb([{ title: 'Score' }]);
            actions.setTitle('Score');
            this.increase();
        }

在我的渲染函数中,我将一些prop值传递给视图文件:

render() {
        const { global, gallery, survey_answers, survey, survey_actual_answers } = this.props;

        if (global.isFetching) {
            return <Loading />;
        }
        return this.view({ gallery, survey_answers, survey, survey_actual_answers });
    }

我遇到的问题是survey_actual_answers第一次加载页面时没有设置prop,但是当我刷新页面时,prop返回数据正常,脚本的其余部分将运行.这是它第一次为该prop值返回一个空数组.

这就是我传递道具的方式:

Score.propTypes = {
    actions: PropTypes.object.isRequired,
    global: PropTypes.object.isRequired,
    survey: PropTypes.object.isRequired,
    survey_answers: PropTypes.object.isRequired,
    gallery: PropTypes.object.isRequired,
    survey_actual_answers: PropTypes.array.isRequired,
    survey_score_system: PropTypes.array.isRequired,
    survey_styles: PropTypes.object.isRequired,
    survey_general_doc_data: PropTypes.object.isRequired
};

function mapStateToProps(state, ownProps) {
    return {
        ...ownProps,
        global: state.global,
        gallery: state.gallery,
        survey: state.survey,
        survey_actual_answers: state.survey.survey_actual_answers,
        survey_answers: state.survey.survey_answers,
        survey_score_system: state.survey.survey_score_system,
        survey_styles: state.survey.survey_styles,
        survey_general_doc_data: state.survey.survey_general_doc_data,
        isFetching: state.isFetching
    };
}

function mapDispatchToProps(dispatch) {
    return {
        actions: bindActionCreators({
            ...globalActions,
            ...galleryActions,
            ...surveyActions
        }, dispatch)
    };
}

有谁知道为什么会这样？这几乎就像它根本没有调用componentDidMount一样.

Answer 1

这是因为React如何从根本上发挥作用.React应该感觉快速,流畅和活泼; 应用程序永远不会被http请求或异步代码堵塞.答案是使用生命周期方法来控制DOM.

组件安装时意味着什么？

理解一些React词汇表可能会有所帮助.安装组件时,它将被插入DOM.这是在调用构造函数时.componentWillMount几乎与构造函数同义,并且大约在同一时间调用.componentDidMount仅在第一次渲染后调用一次.

componentWillMount - > render - > componentDidMount

这与重新渲染或更新有什么不同？

既然组件在DOM中,您想要更改显示的数据.当调用setState或从父组件传递新的props时,将发生组件更新.

componentWillRecieveProps - > shouldComponentUpdate - > componentWillUpdate
- > render - > componentDidUpdate

还需要注意的是,http请求通常在componentDidMount和componentDidUpdate中完成,因为这些是我们可以使用setState触发重新渲染的地方.

那么如何在渲染发生之前获取数据呢？

嗯,有几种方法可以让人们解决这个问题.第一个是在组件中设置初始状态,以确保如果来自http请求的数据尚未到达,它将不会破坏您的应用程序.在http请求完成之前,它将使用默认或空状态.

我通常不喜欢装载模态,但有时候是必要的.例如,当用户登录时,您不希望将它们带到站点的受保护区域,直到完成身份验证.我尝试做的是在用户登录到尽可能多的数据时使用该加载模式,而不会影响用户体验.

您还可以使组件显示为加载,同时不影响网站其余部分的用户体验.我最喜欢的一个例子是Airbnb网站.请注意,可以使用大部分站点,您可以滚动,单击链接,但"体验"下的区域处于加载状态.这是使用React的正确方法,也是在componentDidMount/componentDidUpdate中完成setState和HTTP请求的原因.