styled-components真的好吗?

2018-06-24 01:57:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

最近在学习react,然后遇到react中css该怎么写这个问题,上知乎上看了好多大牛都说styled-components好用是大势所趋。

但我自己用了感觉体验却很差,我在这里说说我为啥觉得styled-components不好用。

1.既然用了styled-components,那除了引用全局的css,还要引用组件的css吗?如果用了,干嘛不把组件的样式全部写到组件的css文件中呢?

好吧,如果不引用css,全靠styled-components来写的话,我给大家看一下代码

    render() {
    return (
        <HeaderWrap>
            <HeaderContainer>
                <LogoArea>
                    <h1>Mask的弹幕网站</h1>
                    <p style={{fontSize:30+"px",marginTop:10+"px"}}><LogoArrow></LogoArrow>记录生活,不忘初心</p>
                </LogoArea>
                <LoginPanel>
                    <p onclick={this.showLoginBox}>登录</p>
                    <p onclick={this.showRegisterBox}>注册</p>
                </LoginPanel>
                <UserPanel>
                    <UserFigure>
                        <p><UserIcon src={this.props.userIconUrl} alt="user-figure"/></p>
                        <p>{this.props.userName}</p>
                    </UserFigure>
                    <UserMenu>
                        <UserOption>投稿</UserOption>
                        <UserOption>空间</UserOption>
                        <UserOption>注销</UserOption>
                    </UserMenu>
                </UserPanel>
            </HeaderContainer>
        </HeaderWrap>
    );
  }

上面的代码是我写的网页的一个header的代码,我是想把它封装成组件的。但是sass里面的嵌套的写法也不好使了,明明一个嵌套就搞定的事情,反而要定义两个组件。可以看到几乎所有容器都被用styled-components来定义了,styled-components的原理就是创建一个react里的component,但实际上有些容器所对应的样式可能就1、2条,也要调用构造函数创建对象,我是觉得这样很浪费资源,工作量也上升了。

 

2.styled-components写完之后你不知道html元素是啥,ok,上面的例子你知道每个标签对应html什么元素吗?你不知道。可读性很差

 

3.在js里写css没有自动补全,样式是在js里的标签模板里写的,所以没有自动补全。可能可以设置吧,但我不会,写css没有补全真的累。。

 

4.生成的html可读性也很差

 

这是生成的html文档,可以看到每定义一个styled-component就会随机生成一个class来绑定你定义的样式,你看这些class根本不知道绑定的样式是什么作用,自己写css的时候还是有一些语义上的定义的,比如clearfix

 

我就用了2天就感觉难受的不行,看了http://www.sohu.com/a/153351371_463987这篇文章,感觉很有共鸣,反正我是觉得styled-components真的不好用,大家看自己的个人喜好吧

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:页面js脚本与img等资源的下载顺序问题。

下一篇:正则基础知识