动态样式

根据应用的状态控制组件的样式,我们称之为动态样式,典型的场景就是按钮的激活状态。因为 JS 变量无法传递到 CSS,传统的方式,我们会通过控制 CSS 类实现动态样式。

你应该见过类似下面的代码:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

我们通过 .btn.btn-active 两个 CSS 类控制动态样式,这有什么问题呢?这是让我们封装的组件严重依赖外部的样式代码,失去独立性,不够内聚。如果存在更多的样式状态,代码的可读性会越来越低。另外,这种方式可移植性也很差。

CSS 类这种动态样式的处理方式,和 React 的理念 UI=f(State) 也是相违背的,因为外部 CSS 的变更,会导致 UI=f(State) 中的 UI 发生变化。

那我们是不是可以基于内联样式处理动态样式呢?确实可以。代码如下:

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO

这种方式有一些优点:

  • 很轻易把 JS 状态变量传递给 CSS;
  • UI=f(State) 的理念相符合;
  • 可移植性强;

局限:

  • 不能使用伪选择器之类的:hover 或媒体查询
  • 容易让组件的结构变得混乱,视觉上干扰代码阅读

Fower 使用属性值的模式,让动态样式处理符合 UI=f(State) 理念,并且代码比内联样式更加简洁。

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^
LIVE DEMO