react hooks深拷贝后无法保留视图状态解决方法
作者：w晚风
这篇文章主要为大家介绍了react hooks深拷贝后无法保留视图状态解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
在使用useState做数据操作更新的时候，有一些复杂数据类型，一个对象数组里包含，函数，dom等等复杂数据类型，想要进行数据更新，并且视图更新的情况下，因useState的特性就必须进行深拷贝赋值。
1、JSON.stringify配合JSON.parse 这个有限制，我们的数据类型包含，函数。它会丢失
2、Lodash 里的深拷贝方法
3、递归实现
我这里通过递归直接写的方法，发现拷贝是可以了，但是无法保留之前dom上的视图状态看，查阅文档如下
React Hooks 是 React 的一种新特性，它提供了一种更加方便和简洁的方式来编写组件。React Hooks 中的 state 和 props 都是可变的，当组件的状态或属性发生改变时，React 会重新渲染组件。在进行深拷贝时，只是将组件的 state 或 props 对象中的值复制到了一个新的对象中，新的对象和原来的对象是完全独立的，它们的引用关系已经被断开。而 React 在进行组件渲染时，是根据组件的 state 和 props 来计算出组件的视图状态的，当组件的 state 或 props 发生改变时，React 会重新计算组件的视图状态，并重新渲染组件。
因此，如果在进行深拷贝后，将新的对象作为组件的 state 或 props，那么组件的视图状态就会丢失，因为 React 认为组件的状态或属性并没有发生改变，所以不会重新计算组件的视图状态。要保留组件的视图状态，需要确保深拷贝后的对象和原来的对象具有相同的引用关系，或者使用其他方法来进行状态管理，例如使用 React Context 或 Redux 等状态管理库。
我这里是找了一个npm包来处理了
首先，我们需要安装一个不可变数据结构库，这里我选择使用Immer。您可以使用以下命令进行安装：
然后，我们可以使用Immer来创建一个新的状态对象，而不必担心丢失与原始状态相关联的视图状态。下面是一个示例：
