在任何环境之下其实没有最佳,最有最适合,那么在react中编写css也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《 React中CSS Modules的使用 》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上,使用CSS Modules还是存有一定的缺陷。这篇文章将会和大家一起聊聊React中编写CSS的姿势,然后再会花一些篇幅来讨论CSS Modules编写CSS的最佳姿势。
其实我自己在React中编写CSS并不多,因为以前都是基于vue的体系来做项目。现在切换到React技术栈,尝试着使用React来构建项目和组件库。到目前为止,我在项目React中使用过两种方式编写CSS:
这只是自己初步的感觉。但@Vjeux在分享CSS-in-JS时就抛出了React中编写CSS时令人头痛的一系列问题:
第一感觉,就编写CSS而言,在Vue的体系下要比在React的体系下爽多了。
在React社区中有关于如何在React中编写CSS的讨论也非常的热烈,而常见的方式是以下几种:
不过每种方式都有自己的利弊,也各有争议。接下来我们先不好坏,分别来体验一下这几种方式写CSS的不同之处。
在开始之前,先使用 Create React APP 来构建React的项目,用来验证React项目中编写CSS的不同之处。
npx create-react-app react-styling
cd react-styling
npm run start
React在没有任何其他工具的情况之下,仅支持两种处理样式的方式: style 道具( props )与 <style> 标签和CSS样式表。 style 道具使用JavaScript对象(CSS属性和值),并最终将其转换为元素的内联样式,如下所示:
// JSX <p style={{backgroundColor: 'red'}}>Hello, {props.name}</p>
还可以这样写:
// App Components
// JSX
<p style={{ backgroundColor: props.color }}>Hello, {props.name}</p>
// index.js
import App from './App';
Reactdom.render(<App name="大漠" color="#306"/>, document.getElementById('root'));
第一种是和我们平时在DOM中的元素上使用 style 属性设置行内样式是一样的;第二种是使用 props 的给 style 设置样式,编译出来也是行内样式。这两种方式输出来的样式都是行内样式,如果从选择器权重来说,它的权重是非常高的,在调用组件,要覆盖其样式就不容易了。
我们还可以在一个样式表文件中设置样式,比如在 App.css 文件中:
.App {
text-align: center;
}
.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
pointer-events: none;
}
在 App 组件中可以通过 className 来调用 App.css 中的类名:
// App.js
import './App.css';
function App(props) {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p style={{ backgroundColor: props.color }}>Hello, {props.name}</p>
</header>
</div>
);
}
编译出来之后如下图所示:
这是React中编写CSS最基本的方式。这两种基本方式和我们在普通的Web中编写CSS方式是一样的。众所周知,Web中编写CSS是较为痛苦的,因为类名的冲突,全局的污染等等。所以社区才会借助一些工具的方式来改变编写CSS。
在 Vue的体系下有 scoped 和CSS Modules ;在React中编写的方式就更多,即接下来要介绍的这些方式。
Inline CSS称为内联CSS,即在html标签元素中使用 style 属性( Attribute )来定义CSS属性,常被称为 行内样式 。如下面这样:
<p style="font-size: 20px; color:#4a54f1; text-align:center; padding-top:100px;">
Hello World!!!
</p>
而在Web中,我们一直提倡的是结构和样式分离,所以一直不推荐行内样式这样的写法。而如今天在React框架体系中,又开始提 Inline CSS ,那么是不是有点倒退了的意思呢?该话题先不讨论,这里咱们只来聊聊Inline CSS在React中的使用,并且该使用是否适合我们的开发习惯。
在React开发中,我们一般使用JSX编写。JSX将被转换为 React.createElement(...) ,所有的属性都将成为 props 对象的一部分。
有关于JSX的详细介绍,可以阅读《深入了解JSX》一文。
在React中,内联样式不指定为 字符串 。 style 属性接受带有驼峰格式的JavaScript对象。例如:
margin-top ─➤ marginTop
border-radius ─➤ borderRadius
font-weight ─➤ fontWeight
background-color ─➤ backgroundColor
下面是React中定义内联CSS的基本步骤:
我们来尝试着将上面的HTML代码,看看在React中怎么来实现:
// App.js
import React from 'react';
function App() {
const styleObj = {
fontSize: '20px',
color: '#4a54f1',
textAlign: 'center',
paddingTop: '100px'
}
return (
<p style={ styleObj }>Hello World!!!</p>
);
}
export default App;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
你将看到的效果如下:
上面的写法和JSX中在 style 中引入需要的样式得到的结果是一样的
原文:https://www.w3cplus.com/react/how-to-write-css-in-react.html
如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。
受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。
一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。
Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。
React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件
React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。
React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大
这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state
react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)
React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!