Javascript React.js&；Radium.js-使React样式在本质上是全局的，但受制于用户输入？

我刚刚开始学习镭，所以请原谅我的无知。如果说

CSS文件有什么了不起的地方的话，那就是在主应用程序组件中链接到它们一次，然后忘记它们，它们会被缓存，可以简单地在所有组件中使用

但是，您无法连接它们和任何用户输入之间的任何交互

下面是一个简单的片段，我根据上提供的示例玩过：

import React, { Component, PropTypes } from 'react';
import Radium from 'radium';

const squareStyles = {
  both: {
    background: 'black',
    border: 'solid 1px white',
    float: 'left',
    height: 100,
    width: 100
  },
  one: {
    ':hover': {
      background: 'green'
    }
  },
  two: {
    ':hover': {
      background: 'red'
    }
  }
};


镭
导出默认类应用程序扩展组件{
......................
render（）{
//最终结果是黄色的
squareStyles.one['：悬停].背景='黄色'；
返回(
);
}
}

尽管squareStyles.one['：hover'].background已预设为绿色，但用户输入将其改为黄色。太好了

但是如果我需要几个组件中的squareStyles呢？我不希望重复的代码在每个样式中定义样式。

问题:

使用Radium或任何第三方附加组件，有没有一种方法可以让styles.js文件在本质上像css一样是全局的

如果没有，那么谁会考虑内联样式，当它只会导致CSS的好处之一的重复代码时呢？ 谢谢

---

更新：

我将方形样式放入封装在module.exports下的js文件中

我添加了

constyles=require（'../styles/styles'）代替本地squareStyles对象

我将所有“squareStyles”的对象置于“styles.squareStyles”之前

一切正常，所以

我假设我必须将所需的文件添加到每个组件中。是吗

文件会被缓存吗

如果我以这种方式转换所有css文件以利用用户交互，我的应用程序会变慢吗

我这样做对吗

再次感谢

使用Radium或任何第三方附加组件，有没有一种方法可以让styles.js文件在本质上像css一样是全局的

是的，当然你可以使用Webpack来自动使某些东西全球化，但是你不想这样做。需要/重要的是，不仅要明确管理依赖关系，还要减少站点的占用空间。如果您最终想要进入诸如代码拆分和只预先加载应用程序的必要部分之类的领域，那么您将需要手动进行操作

<如果没有，谁会考虑内联样式，当它只会导致重复代码的CSS的好处之一照顾？ 内联代码可能导致重复代码，CSS也可能导致重复代码。CSS允许开发人员做的一件事就是懒惰，编写类，而不必担心是否有一个类已经解决了他们想要的大多数可视化表示。这是一个由来已久的想法，即您可以使用最好的语言和技术堆栈，但仍然可以编写糟糕的代码

关于React，它允许您创建可重用的组件。编写几个可重用组件，将它们导入另一个组件，然后只需编写一次内联样式，与css相同。您可能会争辩说导入组件更繁琐，但是css有很多问题，采用这种方法可以解决这些问题。请看这里：

文件会被缓存吗

不会。浏览器是为了支持CSS并缓存它们而构建的。但你必须问问自己：不同的是可以忽略不计的吗？例如，人们比以往任何时候都更担心用户第一次访问你的网站，因为那里的跳出率最高。您可以主张使用缓存的css文件，但是，如果此css文件代表应用程序的整体，那么它肯定比来自几个组件的内联样式花费更长的时间。此外，用额外的css安装额外的组件可能非常简单，在负载方面也不重要。我仍然在衡量这些东西，但需要注意的是，你应该跳出框框思考css这些年来向开发人员宣扬的东西。也许有更好的解决办法。。。您可以自己试一试，从性能角度来看，并向我们报告

如果我以这种方式转换所有css文件以利用用户交互，我的应用程序会变慢吗

街上流传的消息是，你将得到的性能打击是微不足道的。再次，做一个小测试，看看性能是否适合您

我这样做对吗

许多新方法需要时间才能被开发人员采用，当他们通常采用时，你会看到不同的模式出现。您使用的模式绝对是一种选择。您可能会看到该选项被细化、更改甚至废弃（类似于flux的路径，如果您一直关注该项目及其所有的细化/衍生产品）。我想说的是，将css封装到尽可能多的可重用组件中，然后使用像您这样的文件来重用不一定是组件的样式块（例如，向元素/组件添加文本阴影和框阴影的一段代码），最后，利用一次性内联样式处理非模式或不会使用的内容

@Radium
export default class APP extends Component {

 ......................

  render() {
    // final result is yellow
    squareStyles.one[':hover'].background = 'yellow';
    return (
        <div>
          <div key="one" style={ [squareStyles.both, squareStyles.one] } />
          <div key="two" style={ [squareStyles.both, squareStyles.two] } />
          <div style={ { clear: 'both' } }/>
        </div>
    );
  }
}