React-Nactive中多个样式类的引用，与思考

我会带着你远行 2022-04-08 14:57 211阅读 0赞

大话侃侃，皆为个人理解，如有不妥，还望及时纠正，非常感谢！  
之前接触的不论是angularJS，vue，还是angular，他们都提及到了模块化，组件化。当最初听到这些名词时，非常的新鲜。毫无疑问他们的作用就是增强复用性。  
那接下来就需要引出我的话题了。  
在做React的项目时将所有的样式全部写在一个style文件中，当时leader告诉我的是为了增强复用性，以便于别的元素用到相同的样式时可以直接的引用。但是在使用过程中我发现，我通过把他们放在一个文件里用于提升复用性的措施是收效甚微的。

profileFlexDirection: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
      },

profileWidth78: {
        width: 78,
        height: 15,
        fontSize: 13,
        lineHeight: 15,
        color: '#fa1515',
        fontFamily: 'Helvetica Neue'
      },

上述两段代码，`profileFlexDirection`的复用性还是非常高的，你只要在使用到的地方引进即可；但是第二段代码`profileWidth78`的复用性感觉还是相对很低的：宽度，高度，颜色，字体大小尽皆有了确定值，在别的地方怎么能合适的复用。

import Styles from './style'
    <Image style={Styles.iconImage} source={require('')} />

上述是引进图片的代码，他的style样式如此使用，但是这种方式造成了，我几乎要为所有的元素单独写一个自己的样式。这谈何复用性。因此在几经尝试和摸索之后找到一个引进样式的更优秀的方法。

但是最后发现这个方法本来就是有的，别人早就用到了，哈哈。  
在之后的使用中，我就将样式尽量的拆分成一个一个的小样式类并通过数组的方式进行引用。在别的地方用到其中的某一个小样式类可以直接进行引用。组合使用！  
**问题来了：**  
如果我拆分的足够的碎，引进时需要引进的样式类就会特别的多，因此这会造成代码的可阅读性大幅的下降！  
因此，当leader告诉我：你要把握好**平衡**时，突然的有些触动，不要一味的追求样式类的复用性，而丧失了页面代码的可阅读性。**平衡**。  
**最后的话**  
从来不想为了一件事而专门的去做这一件事。我也不想为了工作而去工作。编程是工作，是我的武器，但是编程也是我的江湖。就像足球，足球也是一个江湖，有忠诚，有背叛，有酸甜苦辣。金庸先生走后，我曾有些落寞的说：“你的江湖走完了，接下来的江湖我们替你走”。  
金庸先生走的是一个侠义忠胆的江湖，我走的是黑白分明的江湖。都有酸甜苦辣，都有忠诚背叛。  
我已经开始为我的江湖增加最重要的框架：**平衡**。  
这一切尽皆是一个开始。