可以将所有这些jQuery的东西都放到React.js DOM树上吗？

Question

我最近开始将React和Flux用于我的项目,我也在使用jQuery,用于GUI的某些部分.通过jQuery,我有时会将CSS类和样式甚至DOM节点添加到由React创建和更新的元素中.这似乎工作得很好.React没有抱怨,并且,当render()重新运行时,React不会修改类和样式以及已添加到反应根内部某处的DOM节点.

• 我可以依赖React忽略我在React树中与React DOM节点并排添加的DOM节点吗？ - 我知道如果React决定删除我插入的节点,将删除非React节点.这对我很好.但我确实想知道React某一天是否会对这些不是由React管理的额外节点感到不安,并拒绝工作？

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

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

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

Answer 1

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

• 不要删除/替换/移动React创建的任何节点
• 不要为React节点创建兄弟节点,特别是在反应节点之间或之前
• 不要创建节点,添加事件侦听器,在修改DOM componentDidMount和/或componentDidUpdate
• 不要删除节点,移除事件侦听器,在componentWillUnmount
• 不要创建和手动添加节点componentDidMount传递给jQuery插件
• 不要在反应组件之外修改DOM
• 做setState反应更新它后传递回调(参数2)做某事(但更喜欢componentDidUpdate)

对于手动安装的React组件(通过React.render)

• 不要将react组件作为没有生命周期挂钩的插件控制元素的子元素安装
• React.unmountComponentAtNode在从DOM中删除父级之前,请使用它来清理React组件
• 做一个回调传递给React.render(参数3)如果你必须做一些部件安装后

如果我错过任何内容,请编辑问题,或者包含您认为无效的规则.