javascript - 不可变地更新 react 中的嵌套状态

Question

在我的 React 应用程序中，我有一个名为 parameters 的对象，其状态代表一棵树。

这是我的参数对象:

{
    "Access_List": {
        "state": "override",
        "value": {
            "88": {
                "state": "inherit",
                "value": [{
                    "ip": {
                        "state": "inherit",
                        "value": "19.1.1.1"
                    },
                    "mask": {
                        "state": "override",
                        "value": "0.0.0.0"
                    }
                }]
            }
        }
    }
}

我想要一种通用的方法来更新树上的任何叶子值。我怎样才能做到这一点？例如，我想更新 ip 中的值。

我知道我可以递归地迭代 parameters 对象，并为每个节点提供一个代表其在树中路径的键。例如 ip 将是

"ip":{
        "state":"inherit",
        "value":"19.1.1.1",
        "key":"Access_List.value.88.value.0.ip"  
}

然后我可以使用 lodash deepClone 函数对状态进行深层复制，然后使用 lodash set 改变 ip 的值，如下所示:

set(parameters, `${key}.value`, NEW_VALUE)

最后设置新状态。

这种方式将导致我所有的 child 重新渲染。如何在知道对象路径的情况下永久更新状态。

Answer 1

我建议使用类似immer的东西或immutability-helper 。这使您可以轻松更新不可变的嵌套对象。

对于 immer，你可以这样写:

produce(yourObject, objectState => {
       objectState.Access_List.value.88.value[0].ip.value = 0
});

对于不变性助手:

update(yourObject, {
     Access_List: {
         value: {
             88: {
                 value: {
                    [0]: {
                        ip: {
                           value :{$set: 0}
                       }
                 }
             }
         }
     }
});

这些是更新对象并保持不可变的好方法，可以极大地提高性能。两者都返回新的、不可变的更新对象。 它只更新你想更新的路径，而保留那些你不想更新的对象不变。

如果您使用 redux、mobx 或纯函数/组件，这将防止不必要的重新渲染，因为只有使用对象更新部分的组件才会被重新渲染。

希望这有帮助。快乐编码。