如何在React / Javascript中存儲不可變樹中嵌套節點的“指針”？

Question

我有一個由任意節點組成的不可變嵌套樹（ mori ， immutable-js等），想想文件瀏覽器。 樹由React呈現。 如果代表節點的組件獲得焦點，我想：

• 在節點組件上顯示輸入字段以更改節點名稱。
• 顯示包含UI組件的全局面板，以編輯當前焦點節點的其他屬性，具體取決於所選節點的類型。

一個簡單的狀態對象可能如下所示：

{
    root: {
        type: 'folder'
        name: 'Root',
        focused: false,
        children: [
            {
                type: 'text',
                name: 'Essay',
                focused: false
            },
            {
                type: 'folder',
                name: 'Images',
                focused: false,
                children: [
                    {
                        type: 'image',
                        name: 'Paris',
                        focused: true
                    }
                ]
            }
        ]
    },
    currentlyFocusedNode: <Reference to Paris node>
}

現在，我如何保持對當前焦點節點的有效引用？ 如果我存儲在巴黎節點參考currentlyFocusedNode ，就只要應用程序的任何其它部分修改節點（例如，從上面的內聯名稱輸入）不同步。 我考慮將路徑存儲到焦點節點，我可以使用它來檢索當前引用：

currentlyFocusedNode: ['root', 'children', 0, 'children', 0]

但這對我來說似乎也很不穩定，因為即使是樹上的簡單節點移動操作也可能使該路徑指向錯誤的甚至是不存在的節點。

這些事情是如何使用不可變數據結構處理的？ 或者我根本不想“一成不變”？

Answer 1

您的問題沒有得到答案。 當你說時，你似乎對此有所了解

或者我根本不想“一成不變”？

首先，您說您正在使用不可變數據結構。 意思是它無法改變。
然后你說：

如果我在currentFocusedNode上存儲了一個Paris節點引用，那么只要應用程序的任何其他部分修改節點，它就會不同步

使用不可變數據結構時，事情不會被修改。 您擁有的是舊版本的數據和新版本的數據。 兩者都不會改變。

所以問題應該是這樣的：

如何確定2個節點何時表示相同的數據？

答案是使用ID。

另一個好問題可能是：

給定對舊節點，樹和newData的引用，如何更新樹並跟蹤節點？

這在很大程度上取決於代碼的其余部分如何工作以及您可以訪問哪些部分。 你可以這樣：

function updateNodeInTree(nodeId, newData, inTree){
  oldNode = findNode(nodeId, inTree);
  newNode = merge(oldNode, newData);
  newTree = merge(inTree, {path: {to: newNode}});
  return [newTree, newNode]; 
}

但是，如果您無法訪問樹的更新位置，則可能需要滿足：

newTree = updateTree(oldTree, someData);
newNode = findNode(nodeId, newTree);

Answer 2

為每個節點提供唯一的ID。 保持focused_id值。

任何組件呈現節點的部分都可以檢查是否
this.props.node.id === this.props.focused_id
並適當地渲染。

Answer 3

這就是Flux架構模式的用武之地。

我會像這樣處理它：

1. 保存root和currentlyFocusedNode在TreeStore其中currentlyFocusedNode要么節省null或引用的object in the tree 。
2. 單擊某個節點時，將調度一個事件（使用AppDisptacher），其中包含eventType: 'nodeClicked'和包含單擊的對象（引用）的有效內容。
3. TreeStore聽AppDispatcher並進行更改currentlyFocusedNode
4. React組件偵聽TreeStore中的更改，並在發生更改時重新呈現。