javascript - 是否可以使用 jquery 在 React 组件中设置样式

Question

我是 React 的新手，我知道用 Jquery 来操纵由 React 组成的 dom 是一个非常糟糕的主意。然而，在通过与 Jquery react 呈现的 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");
};

它适用于此页面，但我想将其合并到更改状态和重新呈现的更复杂的页面中。如何使用添加的样式对地址组件使用react？

Answer 1

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

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

也就是说，使用 React 来应用样式有特定的优势:您被迫在正确的时刻应用样式(在您分配给组件的 css 类中)和动画(在 componentDidMount() 中或使用 <ReactCSSTransitionGroup> )在组件的生命周期中。这使您的代码更易于调试:如果您的样式出现问题，您可以在 React 内的正确位置找到所有可疑代码。

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

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

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

或者，如果您调用 activateJQ()在每个 render() 之后在 react 中:

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

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