問題

在使用useState做數(shù)據(jù)操作更新的時候，有一些復(fù)雜數(shù)據(jù)類型，一個對象數(shù)組里包含，函數(shù)，dom等等復(fù)雜數(shù)據(jù)類型，想要進行數(shù)據(jù)更新，并且視圖更新的情況下，因useState的特性就必須進行深拷貝賦值。

方式

1、JSON.stringify配合JSON.parse 這個有限制，我們的數(shù)據(jù)類型包含，函數(shù)。它會丟失

2、Lodash 里的深拷貝方法

3、遞歸實現(xiàn)

我這里通過遞歸直接寫的方法，發(fā)現(xiàn)拷貝是可以了，但是無法保留之前dom上的視圖狀態(tài)看，查閱文檔如下

React Hooks 是 React 的一種新特性，它提供了一種更加方便和簡潔的方式來編寫組件。React Hooks 中的 state 和 props 都是可變的，當組件的狀態(tài)或?qū)傩园l(fā)生改變時，React 會重新渲染組件。在進行深拷貝時，只是將組件的 state 或 props 對象中的值復(fù)制到了一個新的對象中，新的對象和原來的對象是完全獨立的，它們的引用關(guān)系已經(jīng)被斷開。而 React 在進行組件渲染時，是根據(jù)組件的 state 和 props 來計算出組件的視圖狀態(tài)的，當組件的 state 或 props 發(fā)生改變時，React 會重新計算組件的視圖狀態(tài)，并重新渲染組件。

因此，如果在進行深拷貝后，將新的對象作為組件的 state 或 props，那么組件的視圖狀態(tài)就會丟失，因為 React 認為組件的狀態(tài)或?qū)傩圆]有發(fā)生改變，所以不會重新計算組件的視圖狀態(tài)。要保留組件的視圖狀態(tài)，需要確保深拷貝后的對象和原來的對象具有相同的引用關(guān)系，或者使用其他方法來進行狀態(tài)管理，例如使用 React Context 或 Redux 等狀態(tài)管理庫。

解決

我這里是找了一個npm包來處理了

首先，我們需要安裝一個不可變數(shù)據(jù)結(jié)構(gòu)庫，這里我選擇使用Immer。您可以使用以下命令進行安裝：

npm install immer

然后，我們可以使用Immer來創(chuàng)建一個新的狀態(tài)對象，而不必擔心丟失與原始狀態(tài)相關(guān)聯(lián)的視圖狀態(tài)。下面是一個示例：

代碼

import React, { useState } from 'react';
import produce from 'immer';
function MyComponent() {
  const [data, setData] = useState({ 
    name: 'John',
    age: 30,
    address: {
      city: 'New York',
      country: 'USA'
    }
  });
  const handleButtonClick = () => {
    const newData = produce(data, draftData => {
      draftData.age = 31;
      draftData.address.city = 'Los Angeles';
    });
    setData(newData);
  };
  return (
    <div>
      <p>Name: {data.name}</p>
      <p>Age: {data.age}</p>
      <p>City: {data.address.city}</p>
      <p>Country: {data.address.country}</p>
      <button onClick={handleButtonClick}>Update</button>
    </div>
  );
}

在上面的示例中，我們使用了Immer的produce方法來創(chuàng)建一個新的狀態(tài)對象newData，并在其中更新了age和address.city屬性。然后，我們使用setData方法將新的狀態(tài)對象設(shè)置為組件的狀態(tài)。由于我們使用了不可變數(shù)據(jù)結(jié)構(gòu)，與原始狀態(tài)相關(guān)聯(lián)的視圖狀態(tài)將不會丟失。

請注意，我們在handleButtonClick方法中使用了produce方法來創(chuàng)建新的狀態(tài)對象。produce方法將原始狀態(tài)對象data作為第一個參數(shù)，并接受一個回調(diào)函數(shù)作為第二個參數(shù)。在回調(diào)函數(shù)中，我們可以使用類似于修改原始狀態(tài)對象的方式來修改draftData對象，但實際上我們是在修改新的狀態(tài)對象。最后，produce方法將返回一個新的狀態(tài)對象newData，該對象包含所有更改。

我這里試過是ok的

以上就是react hooks深拷貝后無法保留視圖狀態(tài)解決方法的詳細內(nèi)容，更多關(guān)于react hooks深拷貝視圖狀態(tài)的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論