我读取componentDidMount了一次仅被调用一次的初始渲染,但是我看到它被多次渲染。
componentDidMount
看来我创建了一个递归循环。
mapStateToProps
我认为就是这样。我可能是错的。
如何停止循环?
这是用于以编程方式呈现子组件的代码。
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> ) }) }
组件实例只会被挂载一次,而在被删除时将被卸载。在您的情况下,它将被删除并重新创建。
该key道具的目的是帮助React找到相同组件的先前版本。这样,它可以使用新的道具更新先前的组件,而不用创建新的道具。
key
React通常可以在没有键的情况下正常工作,但带有项目的列表除外。它希望在那里有一个键,以便可以跟踪重新安排,创建或删除项目的时间。
在您的情况下,您明确告诉React您的组件与上一个组件不同。您在每个渲染器上都给出了一个新密钥。这迫使React将之前的实例视为已删除。该组件的所有子组件也将被卸载和拆除。
您不应该(永远)随机生成密钥。键应始终基于组件正在显示的数据的标识。如果不是列表项,则可能不需要密钥。如果它是一个列表项,则最好使用从数据的标识派生的密钥,例如ID属性,或者可能是多个字段的组合。
如果生成随机密钥是正确的事情,React会为您解决这个问题。
您应该将初始获取代码放置在React树的根目录中,通常是App。不要把它放在随机的孩子身上。至少您应该将其放在应用程序生命周期中存在的组件中。
App
放入它的主要原因componentDidMount是它不能在服务器上运行,因为服务器端组件永远不会挂载。这对于通用渲染很重要。即使您现在不这样做,也可以稍后再进行,为此做准备是一种最佳实践。