javascript - 与浏览器控制台相比，为什么相同的 jQuery 选择器在 React Component hooks 中具有不同的输出？

Question

我使用 jQuery 和 ReactJS 来完成一些事情。我注意到，当我在 React 中执行此操作与直接在浏览器控制台中执行操作时， $(selector) 的输出是不同的。

由于这个原因，我直接在浏览器控制台中执行的某些 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() Hook 中，我在控制台中查看此输出:

...另一方面，直接在浏览器控制台中键入的相同控制台语句显示此输出(这是我期望的输出):

有人可以解释一下这些差异吗？

我在实现 jQuery DataTables 时遇到问题，因为将 $('#files-table').DataTable() 放入 React componentDidUpdate() Hook 会给出一个错误: $(...).DataTable 不是函数 虽然它可以在浏览器中工作(我知道这个错误可能是由于加载 jQuery 两次等引起的，但我不认为这是案例在这里)。

Answer 1

这种差异是由于 ReactJS 使用虚拟 DOM 而导致的，当您在浏览器控制台中执行 jQuery 选择器时 - 您正在访问实际的(真正的)DOM。

为什么选择虚拟 DOM？

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

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

One would think that re-rendering the entire Virtual DOM every time there’s a possibility that something has changed would be wasteful — not to mention the fact that at any one time, React is keeping two Virtual DOM trees in memory. But, the truth is that rendering the Virtual DOM will always be faster than rendering a UI in the actual browser DOM. It doesn’t matter what browser you’re using: this is just a fact.

React does this magic by attaching attributes to elements in your document and manipulating them individually (using these very specific ID attributes) after doing the diff to determine what needs updating. The Virtual DOM inserts additional steps into the process, but it creates an elegant way to do minimal updates to the browser window without you having to worry about the actual methods being used or even what needs to be updated and when.

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

如何在 ReactJS 中集成 jQuery DataTables？

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

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

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

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