React 中五种常见的样式策略(下)

简介: 今天一起来看看React中实现样式的五种常见策略~

下面来将JSS和内联样式进行对比。


内联样式:

import React from 'react'
const Button = () => {
  const buttonGreen = {
    backgroundColor: "green",
    border: "1px solid white",
    borderRadius: "2px"
  };
  return(
    <button style={buttonGreen}>
      green
    </button>
  )
}
复制代码


React-JSS:

import React from 'react'
import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({
  buttonGreen: {
    backgroundColor: "green",
    border: "1px solid white",
    borderRadius: "2px"
  }
})
const Button = () => {
  const {buttonGreen} = useStyles()
  return(
    <button className={buttonGreen}>
      green
    </button>
  )
}
复制代码


可以看到,相对于普通的内联样式,React-JSS的特征如下:

  • 导入了一个createUseStyles方法;
  • 通过createUseStyles方法方法创建一个useStyles hook;
  • 通过参数对象的方式将样式传递给createUseStyles方法;
  • 通过解析useStyles hook的返回值获取到组件样式buttonGreen;
  • 将buttonGreen传递给组件的className进行解析。

那如果想要传递props,两者又会有什么不同的呢?接着来看:


内联组件:

import React from 'react'
const Button = ({backgroundColour, children}) => {
  const buttonStyles = {
    backgroundColor: backgroundColour,
    border: "1px solid white",
    borderRadius: "2px"
  };
  return(
    <button style={buttonStyles}>
      {children}
    </button>
  )
}
复制代码


React-JSS:

import React from 'react'
import {createUseStyles} from 'react-jss'
const useStyles = createUseStyles({
    buttonStyles: {
      backgroundColor: backgroundColour => backgroundColour,
      border: "1px solid white",
      borderRadius: "2px"
    }
})
const Button = ({backgroundColour, children}) => {
  const {buttonStyles} = useStyles(backgroundColour)
  return(
    <button className={buttonStyles}>
      {children}
    </button>
  )
}
复制代码


可以通过以下方式来调用上面的组件:

import React from 'react';
import Button from 'Button';
const SomePage = () => (
  <Button backgroundColour="blue">blue</Button>
)
复制代码


这里的区别也是显而易见的,需要将传递的props的值传给useStyles方法,这样就可以在createUseStyles中使用了。这就是React-JSS的基本使用了。下面来看看它的优缺点

React-JSS的优点:


  • 可重用性: 组件是可重用的,所以一次编写即可在任何地方使用它们;
  • 动态样式: 可以使用props动态设置样式;
  • 局部范围: JSS支持局部样式。

React-JSS的缺点:


  • 额外的层: 使用React-JSS库会使得React程序多一个额外的层,这个有时是不必要的;
  • 代码可读性: 通过这种方式也会自动生成类名,它们都是唯一的,可阅读性较差,


尤其是在浏览器进行调试时,难以确定这个样式是在哪里定义的。

上面介绍了五种常用的React样式策略,这五种策略并没有绝对的好或坏,都各有优缺点,可以根据实际的业务场景去使用。


相关文章
|
2月前
|
前端开发 JavaScript
react 修改 antdesign 的 组件默认样式
react 修改 antdesign 的 组件默认样式
|
4月前
|
前端开发 算法 JavaScript
React-组件-内联样式 和 React-组件-列表渲染优化
React-组件-内联样式 和 React-组件-列表渲染优化
40 0
|
1月前
|
前端开发 容器
第十八章 React中的样式模块化处理
第十八章 React中的样式模块化处理
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
23 0
|
3月前
|
前端开发
react解决页面样式冲突(module)
react解决页面样式冲突(module)
|
4月前
|
前端开发
React-组件-外链样式
React-组件-外链样式
21 0
|
6月前
|
前端开发
前端项目实战拾陆-react-admin路由样式替换antd
前端项目实战拾陆-react-admin路由样式替换antd
39 0
|
6月前
|
前端开发
前端项目实战壹佰贰拾react-admin+material ui-react-admin之SimpleList中rowStyle设置样式
前端项目实战壹佰贰拾react-admin+material ui-react-admin之SimpleList中rowStyle设置样式
26 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之Dialog表单提交,ICon样式事件,删除功能5
25 0
|
6月前
|
前端开发
前端项目实战叁拾陆-​react-admin+material ui-侧边栏样式设定重置
前端项目实战叁拾陆-​react-admin+material ui-侧边栏样式设定重置
42 0

相关产品

  • 云迁移中心