为什么在react.js中会被多次调用

Question

我读组件didMount在初始渲染时只被调用一次，但我看到它被渲染了多次。

似乎我创建了一个递归循环。

• 组件didMount调度动作来获取数据
• 一旦接收到数据，它就会触发成功操作，将数据存储在redux状态。
• 父反应组件连接到redux存储，并且具有mapStateToProps用于刚刚在上述步骤中更改的条目
• 父渲染子组件（通过变量编程选择）
• 子组件的组件didMount再次被调用
• 它消除了获取数据的操作

我想这就是正在发生的事情。我可能错了。

我怎样才能停止循环？

下面是以编程方式呈现子组件的代码。

 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>
     )
   })
 }

Answer 1

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

keyprop的目的是帮助React查找相同组件的前一个版本。这样，它可以用新的道具更新以前的组件，而不是创建新的道具。

React通常可以在没有键的情况下正常工作，但包含项的列表除外。它希望在那里有一个键，以便在项目被重新排列、创建或删除时能够跟踪。

在您的案例中，您明确地告诉React您的组件与前一个组件不同。你给每个渲染一个新的键。这将迫使React将前一个实例视为已删除。该组件的任何子级也将被卸载和拆除。

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

如果生成一个随机密钥是正确的做法，那么React将为您解决这个问题。

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

将它放在componentDidMount中的主要原因是它不会在服务器上运行，因为服务器端组件永远不会装入。这对于通用渲染非常重要。即使你现在不这样做，你也可能以后再这样做，为此做好准备是最好的做法。