Question

我是React JS的新手，并计划在我的一个项目中使用它。我已经阅读了文档并对React略有了解。我有一个具有以下细节的场景：

服务器以频繁的间隔将项目/列表的数组推送到UI。
列表中的项目彼此不相似或与多个列表不相似，但会按接收顺序显示。
在服务器发出AJAX响应/推送通知时，必须将项目附加到DOM。
很少有人会根据参考编辑/删除DOM中的项目。

我在堆栈溢出中经历了一些动态附加数据的文章，其中很少有以下内容：

以上所有解决方案均未提供附加的直接选项。他们建议创建一个地图/数组并将值添加到地图并重新渲染值。

我不太习惯使用地图，因为我不会将详细信息传递给服务器，只会向用户显示。我认为创建一个地图将有冗余值，如果列表变大，它将占用内存。

我不想将jQuery /任何其他库与React混合使用。有没有可能渲染函数/组件将附加到DOM而不是维护在数组中，因为列表中的项目不相似。

为什么没有任何选项可以直接遍历/编辑DOM而不是维护列表。如果有选项可以指导我，以便我能够理解它的优点。

Answer 1

您绝对不需要使用jQuery或任何其他直接DOM操作工具。
没有必要担心你的列表变得如此庞大而影响性能/消耗太多内存 - 事实上你在DOM中有很多元素会更快地达到资源限制。您可以轻松地将更多数据存储在JSON映射/数组中，而不是渲染。
我相信你没有种子地图，你需要一个数组，但这不是一个重要的事情。

因此，当您从服务器收到一些更新时，只需更新这样的数据，渲染将关注显示它们：

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
}

Answer 2

嗨，我确实处于这种状况。最近从jQuery切换到React。解决方案是Redux。 React不会有任何DOM操作。所以忘掉我们以前的.parent（）。child（）。next（）。

在Redux的核心中有这个概念。国家管理。所以基本上状态是你需要通过React'树'操纵的一个小工具。有点像jQuery中的DOM操作但不完全相同。国家将在兄弟姐妹之间，父母之间或孩子之间流动

在React JS中遍历/编辑DOM

2 个答案: