javascript - 可以对 React.js DOM 树执行所有这些 jQuery 操作吗？

Question

我最近开始使用 React和 Flux对于我的一个项目，我也在使用 jQuery，用于 GUI 的某些部分。通过 jQuery，我有时会向 React 创建和更新的元素添加 CSS 类和样式，甚至添加 DOM 节点。这似乎工作得很好。 React 不会提示，而且，当 render() 重新运行时，React 不会修改类和样式以及已添加到 React 根深处某处的 DOM 节点。

• 我可以依靠 React 忽略我在 React 树中与 React DOM 节点并排添加的 DOM 节点吗？ — 我知道如果 React 决定删除我插入它们的节点，非 React 节点将被删除。这对我来说很好。但我确实想知道 React 是否会在未来某一天对这些不受 React 管理的额外节点感到不安，并拒绝工作？

• 如果 React 不管理 DOM 节点的任何样式(我没有向 render() 生成的节点添加任何 style 属性) ，那么我可以通过 jQuery 安全地将我自己的样式添加到这个 DOM 节点吗？例如。在 jQuery 中通过 #id 查找一个节点，然后设置它的宽度。

• 如果 React 生成的 DOM 节点上没有 className，我可以通过 jQuery 安全地向该节点添加和删除类吗？ (例如，在鼠标悬停时添加一个类。)

我目前正在做这些可能很奇怪的事情的一个原因是，我有一些我现在不想移植到 React 的 jQuery soup 遗留代码。另一个是我使用的一些 jQuery 插件有时会在 React 树中添加 DOM 节点。

Answer 1

这听起来不错，但是您需要遵循一些规则(您只能使用遵循这些规则的插件):

• 不要删除/替换/移动 React 创建的任何节点
• 不要为 React 节点创建兄弟节点，尤其是在 React 节点之间或之前
• 做 创建节点、添加事件监听器、在 componentDidMount 和/或 componentDidUpdate 中修改 dom
• 做删除节点，删除事件监听器，在 componentWillUnmount
• 做在 componentDidMount 中手动创建和附加节点以传递给 jQuery 插件
• 不要在 React 组件之外修改 DOM
• do 将回调传递给 setState(参数 2)以在 React 更新后执行某些操作(但更喜欢 componentDidUpdate)

对于手动挂载的 React 组件(通过 React.render)

• 不要将 react 组件挂载为没有生命周期钩子(Hook)的插件控制元素的子元素
• 做使用 React.unmountComponentAtNode 在从 DOM 中移除父组件之前清理 React 组件
• 做 如果您必须在安装组件后做某事，则将回调传递给 React.render(参数 3)

如果我遗漏了任何内容，或者包含了您认为无效的规则，请编辑问题。