在调度过程之后和渲染之前在反应生命周期中调用哪个方法

Posted 2023-02-22

【中文标题】在调度过程之后和渲染之前在反应生命周期中调用哪个方法

【英文标题】：Which method in react life cycle call after dispatch process and before render

【发布时间】：2018-01-21 08:20:50

【问题描述】：

我有一个状态来指定渲染哪个组件（组件 A 或 B）。 当我的动作调度特定类型（例如 GO_TO_B 或 GO_TO_A）时确定此状态。

然后我需要从服务器获取一些配置来渲染组件 A。我希望这些配置存储在存储中。所以我应该调用一个操作（例如 fetchConfig() ）从服务器异步获取数据并调度响应。

我的问题是我在哪里调用 fetchConfig() 操作。

如果我在组件 A 的 componentDidMount() 中调用此操作，则会发生无法调度中间调度的错误。

那么在调度过程之后和渲染之前，react 生命周期调用中的哪个方法？

【问题讨论】：

当您说“如果我在 componentDidMount() 中调用操作”时，您的意思是，如果您在 componentDidMount() 中发送操作？如果是这样，请分享代码，可能会发生错误。我大部分时间都这样做，它通常有效，除非另有说明。

【参考方案1】：

我了解您使用的是redux。 如果这是正确的，我建议您使用thunk 进行获取。

redux-thunk 是一个中间件，它允许你调度函数（而不是像动作这样的序列化对象），这样你就可以延迟一个动作的调度，甚至有条件地调度它。

thunk 的一个例子是这样的：

function loadSomeThings() 
    return dispatch => 
        fetchFirstThingAsync.then(data =>  // first API call
            dispatch( type: 'FIRST_THING_SUCESS', data ); // you can dispatch this action if you want to let reducers take care of the first API call
            return fetchSecondThingAsync(data), // another API call with the data received from the first call that returns a promise
        )
        .then(data => 
             dispatch( type: 'SECOND_THING_SUCESS', data ); // the reducers will handle this one as its the object they are waiting for
        );
    ;
  

您会注意到我们甚至可以链接 ajax 请求，并且我们可以在每次成功（或失败！）时分派（如果需要）一个操作。

我建议阅读文档以更好地理解它。

【参考方案2】：

您可以使用componentWillMount：Doc。

componentWillMount() 会在安装发生之前立即调用。它在render() 之前调用，因此在此方法中同步设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。

【讨论】：

明明是we recommend using the constructor() instead，那你为什么要推荐给他呢？