可以在componentDidUpdate()上调度更新商店的操作吗?

时间:2018-09-22 14:30:04

标签: reactjs redux react-redux

根据React's documentation,componentDidUpdate()是引起副作用的地方,但是应避免(或谨慎处理)this.setState(),因为它会引起额外的渲染。 如何调度更新商店的操作?相同的条款是否也适用于这种情况?

我还没有找到任何文档,我发现的是this question on SO,但是它派遣操作的目的实际上是从服务器获取数据。

4 个答案:

答案 0 :(得分:1)

  

根据React的文档componentDidMount(),是产生副作用的地方,但应避免this.setState()

文档中没有说明这一点的内容。
最重要的是,它清楚地说:

  

您可以立即在componentDidMount()中调用setState()

我认为您将其与componentdidupdate混合在一起

  

如何调度更新商店的动作

最好在componentDidMount中执行此操作,如果商店的更新将导致向组件注入新的prop,则会进行另一个render调用。那就太好了!

请记住,componentDidMount在组件的生存期内仅被调用一次:

  

componentDidMount()在安装组件(插入树中)后立即被调用

因此,没有办法在那里获得无限循环(如注释中所建议)。

同样,我认为您是指componentdidupdate,它将在每次更新时被调用。因此在那里更新状态将导致它一次又一次地运行。
这就是为什么您应该有条件地更新状态的原因:

  

您可以立即在componentDidUpdate()中调用setState(),但请注意,必须将其包装在条件中

修改

  

如何调度更新商店的操作

此处适用相同规则。如果传递了新的prop值,则调度动作可能会触发另一个渲染。这会导致无限循环。
如文档中所述,只需在分派操作之前检查条件即可。

答案 1 :(得分:0)

这取决于您的操作:

  1. 如果操作导致立即重新呈现,则您的应用程序体系结构可能有问题。
  2. 如果操作更新了商店,但没有在此确切组件上进行重新渲染,或者没有通过ajax获取某些信息并导致了重新渲染,那么就可以了。

答案 2 :(得分:0)

我一般认为还可以。但是,如果分派的操作更新了传递给您组件的道具,它可能会重新渲染;因此在这种情况下,我会谨慎处理(与您使用setState一样)

答案 3 :(得分:0)

如果您想在componentDidMount()中分派一个动作,然后考虑重新渲染,那么我在我的React Native应用中就遇到了这个问题,在那里我在componentDidMount()中分派了一个动作,这导致无用的重新渲染。 您可以将发件放在

if(!isFetching){
} 

或在setTimeout中,因为它将包含只能运行一次的调度

setTimeout(() => {

    }, 200)