2017-07-07 75 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操作,但不完全相同。国家将在兄弟姐妹之间流动,直到父母或者下降到孩子