可以使用 jquery 在反应组件内部设置样式吗

Question

我是 react 新手，我知道用 Jquery 操作由 react 组成的 dom 是一个非常糟糕的主意。但是，通过 React with Jquery 在 dom 组件上操作样式是不是一个坏主意？

ReactDom.render( <LoginPage/>, document.getElementById('root') ); 
//after render call activateJQ();

var activateJQ = function(){
   $('button').animate({
      backgroundColor: "#aa0000",
      color: "#fff",
      width: 500
    }, 1000 );
   $('.error-msg').css("color","red");
};

它适用于这个页面，但我想将它合并到更复杂的页面中，这些页面会改变状态并重新呈现。如何对添加样式的地址组件做出反应？

Answer 1

简短的回答：是的，你可以。但这是一个非常糟糕的主意，如果你这样做了，你会后悔的。

在您的具体示例中，使用 jQuery 应用样式（颜色或错误消息）和动画样式（按钮的背景颜色等）不会破坏任何内容。

也就是说，使用 react 来应用样式有一些特定的优势：您必须在适当的时候应用样式（在您分配给组件的 css 类中）和动画（在 componentDidMount() 中或使用 <ReactCSSTransitionGroup>）在组件的生命周期中。这使您的代码更易于调试：如果您的样式中断，您可以在 react 内部的正确位置找到所有可疑代码。

记住：react 是一个动态引擎，它可以根据用户操作改变 DOM 的结构。而且您的 css 样式与您的 DOM 结构紧密耦合，因此您希望它们同步（并因此在代码中的同一位置进行管理）。

在您的具体情况下，我可以想到至少一种情况，您的 react + jQuery 设置出现故障：

• ReactDOM.render() 运行，并启动反应引擎
• 初始反应渲染周期有 2 个，例如按钮和 1 条错误消息
• 已应用 jQuery，为 2 个按钮和 1 个错误消息设置动画
• 用户点击了一些
• react 使用 2 个新按钮和 1 个新错误消息重新渲染
• 您的 jQuery 不再运行
• 新的反应按钮和错误消息没有得到新的样式

或者，如果您在每个 render() 之后调用 activateJQ() 进行反应：

• 1000 毫秒超时可能会与您的渲染周期不同步，因此可能会导致不必要的 DOM 更新或更糟，如果在 jQuery 更新期间 react 更改 DOM，则会中断
• 带有样式更新的 jQuery 类选择器是出了名的粗糙（因此会影响性能）工具。它每次都需要遍历整个 DOM 进行更新，其中包括对甚至不需要更新的组件的更新。在 React 中管理样式要高效得多：样式仅应用于需要它的组件，并且仅在需要时才应用。

随着应用程序的增长，您会发现混合使用 react 和 jQuery 来管理 DOM 和样式（它们是高度相互依赖的）将变得难以管理。