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

Question

我读到 componentDidMount 在初始渲染中仅被调用一次，但我发现它被渲染了多次。

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

• componentDidMount 调度操作来获取数据
• 收到数据后，它会触发 success 操作，将数据存储在 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>
     )
   })
 }

Answer 1

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

key 属性的目的是帮助 React 找到同一组件的先前版本。这样它就可以用新的 props 更新以前的组件，而不是创建一个新的组件。

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

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

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

如果生成随 secret 钥是正确的做法，React 就会为你处理好这个问题。

您应该将初始获取代码放在 React 树的根中，通常是 App。不要把它放在某个随机的 child 身上。至少您应该将其放入在应用程序的生命周期中存在的组件中。

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