为什么与浏览器控制台相比，相同的 jQuery 选择器在 React 组件钩子中具有不同的输出？

Question

我将 jQuery 与 ReactJS 一起用于几件事。我注意到 $(selector) 在 React 中与直接在浏览器控制台中执行时的输出不同。

由于这个原因，我直接在浏览器控制台中执行的某些 javascript 代码可以工作，但是当我在 React 中编写它时它就不起作用了。

例如我有这个表：

render(){
    console.log(this.state.data);
    return (
        <Table striped bordered condensed hover id="files-table">
            <thead>
                <tr>
                    <th>stuff</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>stuff</td>
                </tr>
            </tbody>
        </Table>
    );
}

一方面，当我在 React 中执行 console.log($('#files-table')) 时，假设在 componentDidUpdate() 钩子中，我在控制台中看到以下输出：

...另一方面，直接在浏览器控制台中输入的相同控制台语句会显示此输出（这是我所期望的）：

有人能解释一下不同之处吗？

我在实现 jQuery DataTables 时遇到问题，因为将 $('#files-table').DataTable() 放入 React componentDidUpdate() 钩子会出现错误：$(...).DataTable is not a function 虽然它有效在浏览器中（我知道这个错误可能是由于两次加载 jQuery 等引起的，但我认为这里不是这种情况）。

Answer 1

这种差异是由于 ReactJS 使用虚拟 DOM 并且当您在浏览器控制台中执行 jQuery 选择器时 - 您正在访问实际（真实）DOM。

为什么选择虚拟 DOM？

ReactJS 不是直接接触真实的 DOM，而是构建它的抽象版本（副本）。 ReactJS 使用这种方法解决的主要问题是 DOM 从未针对创建动态 UI 进行优化，并且写入浏览器的 DOM 相对较慢。

将虚拟 DOM 视为实际 DOM 的轻量级副本。与实际的 DOM 一样，虚拟 DOM 是一个节点树，将元素及其属性和内容列为对象和属性。 React 的 render() 方法从 React 组件创建一个节点树，并更新此树以响应由操作引起的数据模型中的突变。

人们会认为每次有可能发生变化时重新渲染整个 Virtual DOM 是一种浪费——更不用说 React 在任何时候都会在内存中保留两个 Virtual DOM 树。但是，事实是渲染虚拟 DOM 总是比在实际浏览器 DOM 中渲染 UI 更快。您使用什么浏览器并不重要：这只是事实。

React 通过将属性附加到文档中的元素并在执行 diff 以确定需要更新的内容后单独操作它们（使用这些非常特定的 ID 属性）来做到这一点。 Virtual DOM 在流程中插入了额外的步骤，但它创建了一种优雅的方式来对浏览器窗口进行最少的更新，而您不必担心正在使用的实际方法，甚至需要更新什么以及何时更新。

您可以在explained in this article 和ReactJS docs 中找到有关虚拟 DOM 和实际 DOM 之间差异的更多信息。

如何在 ReactJS 中集成 jQuery DataTables？

在您的情况下 - jQuery DataTabes 库修改了 DOM。所以，你需要让 React 远离它。 React 在完全控制 DOM 时效果最好。但在您的情况下 - 您需要将控件传递给 jQuery。

您需要创建一个组件来管理 jQuery DataTabes。这个组件将提供一个以 React 为中心的 jQuery 组件视图。此外，它将：

• 使用 React 生命周期方法来初始化和拆卸插件；
• 使用 React 道具作为插件配置选项并连接到插件的方法事件；
• 卸载组件时销毁插件。

看看my answer here。它包含如何在 ReactJS 中集成 jQuery 库的完整细节和详细说明。您可以使用相同的方法。