小编典典

为什么componentDidMount在react.js和redux中被多次调用?

reactjs

我读取componentDidMount了一次仅被调用一次的初始渲染,但是我看到它被多次渲染。

看来我创建了一个递归循环。

  • componentDidMount调度操作以获取数据
  • 接收到数据后,它将触发成功操作以将数据存储在redux状态。
  • 父react组件已连接到redux存储,并具有mapStateToProps在上述步骤中刚刚更改的条目
  • 父级渲染子级组件(通过变量以编程方式选择)
  • 子组件的componentDidMount再次被调用
  • 它派遣行动以获取数据

我认为就是这样。我可能是错的。

如何停止循环?

这是用于以编程方式呈现子组件的代码。

 function renderSubviews({viewConfigs, viewConfig, getSubviewData}) {

   return viewConfig.subviewConfigs.map((subviewConfig, index) => {
     let Subview = viewConfigRegistry[subviewConfig.constructor.configName]
     let subviewData = getSubviewData(subviewConfig)

     const key = shortid.generate()
     const subviewLayout = Object.assign({}, subviewConfig.layout, {key: key})
     return (
       <div
         key={key}
         data-grid={subviewLayout}
         >
         <Subview
           {...subviewData}
           />
       </div>
     )
   })
 }

阅读 905

收藏
2020-07-22

共1个答案

小编典典

组件实例只会被挂载一次,而在被删除时将被卸载。在您的情况下,它将被删除并重新创建。

key道具的目的是帮助React找到相同组件的先前版本。这样,它可以使用新的道具更新先前的组件,而不用创建新的道具。

React通常可以在没有键的情况下正常工作,但带有项目的列表除外。它希望在那里有一个键,以便可以跟踪重新安排,创建或删除项目的时间。

在您的情况下,您明确告诉React您的组件与上一个组件不同。您在每个渲染器上都给出了一个新密钥。这迫使React将之前的实例视为已删除。该组件的所有子组件也将被卸载和拆除。

您不应该(永远)随机生成密钥。键应始终基于组件正在显示的数据的标识。如果不是列表项,则可能不需要密钥。如果它是一个列表项,则最好使用从数据的标识派生的密钥,例如ID属性,或者可能是多个字段的组合。

如果生成随机密钥是正确的事情,React会为您解决这个问题。

您应该将初始获取代码放置在React树的根目录中,通常是App。不要把它放在随机的孩子身上。至少您应该将其放在应用程序生命周期中存在的组件中。

放入它的主要原因componentDidMount是它不能在服务器上运行,因为服务器端组件永远不会挂载。这对于通用渲染很重要。即使您现在不这样做,也可以稍后再进行,为此做准备是一种最佳实践。

2020-07-22