2017-07-07 60 views
0

我是React JS的新手,並計劃在我的一個項目中使用它。我已經閱讀了文檔並對React有了一些想法。我有以下詳細情況:在React JS中遍歷/編輯DOM

  1. 服務器將頻繁間隔的項目/列表數組推入UI。
  2. 列表中的項目與彼此或多個列表不相似,但會按收到的順序顯示。
  3. 根據來自服務器的AJAX響應/推送通知,項目將不得不附加到DOM。
  4. 很少有情況下,必須根據參考編輯/刪除DOM中的項目。

我所經歷的一些文章中的堆棧溢出的動態數據追加和他們幾個都低於:

所有上述解決方案沒有爲追加提供直接的選擇。他們建議創建一個地圖/數組並將這些值添加到地圖並重新呈現這些值。

我不是在使用地圖,因爲我不會傳球的細節,服務器和其僅向用戶非常舒適。我認爲創建一張地圖會產生冗餘值,如果列表變大,它將佔用內存。

我不想混的jQuery /隨着反應的任何其他庫。由於列表中的項目不相似,渲染函數/組件可能會附加到DOM而不是維護數組。

爲什麼沒有任何選項來遍歷/編輯DOM,而不是直接的維護清單。如果有一個選項,你能指導我嗎,以便我能夠理解它的優點。

+0

似乎有點xy問題,你有問題x但不清楚你爲什麼認爲y是答案。你爲什麼認爲dom操作是解決你的問題的缺失部分? – aw04

回答

1
  1. 你絕對不需要使用jQuery或任何其他直接的DOM操作工具。
  2. 沒有必要擔心,你的列表變得如此巨大,它會影響性能的事實/消耗了太多的內存 - 你有很多的DOM元素將更快擊中了資源約束的事實。您可以輕鬆地將更多數據存儲在JSON地圖/數組中,而不是渲染。
  3. 我相信你不會播種地圖,你需要一個數組,但這不是一件重要的事情。

當您收到來自服務器的一些更新,所以只需更新這樣的數據並呈現約需顯示他們的護理:

onDataReceived(newData) { 
    // or you can mutate the `data` array here, doesn't matter too much 
    this.setState({data: data.concat(newData)}) 
} 

render() { 
    // render this.state.data 
} 
0

您好我的確切情況。最近從jQuery切換到React。解決方案是Redux。 React不會有任何DOM操作。因此,忘掉.parent()。child()。next()之前的東西。

即使世界這個概念在終極版的核心。國家管理。所以基本上狀態是一個你需要通過React'樹'來操作的小工具。有點像jQuery中的DOM操作,但不完全相同。國家將在兄弟姐妹之間流動,直到父母或者下降到孩子