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

IT技术 reactjs redux react-redux
2021-05-20 08:54:23

我读到componentDidMount被调用一次以进行初始渲染,但我看到它被多次渲染。

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

  • componentDidMount 调度操作以获取数据
  • 收到数据后,它会触发成功操作以将数据存储在 redux 状态。
  • 父 react 组件连接到 redux 存储,并且具有mapStateToProps在上述步骤中刚刚更改的条目
  • parent 呈现子组件(通过变量以编程方式选择)
  • 子组件的 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>
     )
   })
 }
1个回答

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

该点keyprops是帮助阵营找到相同分量的前一版本。这样它就可以用新的 props 更新以前的组件,而不是创建一个新的组件。

React 通常可以在没有键的情况下正常工作,例外是包含项目的列表。它需要一个键,以便它可以在项目被重新排列、创建或删除时进行跟踪。

在您的情况下,您明确告诉 React 您的组件与前一个不同。您在每个渲染上都提供了一个新键。这会强制 React 将前一个实例视为已删除。该组件的任何子组件也将被卸载和拆除。

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

如果生成随机密钥是正确的做法,React 会为您处理好。

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

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