react hooks 循环渲染

React Hooks循环渲染通常发生在组件内的状态或属性发生变化，并且该变化影响到了包含循环结构的列表渲染时。当一个数组或对象的状态发生改变，React默认会尝试重新计算整个组件树，包括那些嵌套在循环中的元素。如果这部分数据更新触发了新的渲染，而新渲染又涉及到相同的列表，就会形成无限递归，导致浏览器崩溃，这就是所谓的“React Hooks的循环渲染”。

为了避免这种情况，你可以采取以下策略：
1. 使用`React.memo`或`useMemo`钩子对循环组件进行优化，它会对传入的依赖项做浅比较，避免不必要的渲染。
2. 使用`Array.from()`创建一个新的数组，而不是直接操作原数组，因为对原数组的操作会触发额外的遍历。
3. 避免在`useState`或`useEffect`中直接修改数组的长度或元素位置。

如果循环结构是必要的，可以考虑使用`key`属性，给每个列表元素提供唯一的标识，帮助React跟踪哪些元素已经更改或添加。