React 界面样式设计

当我们完成程序的基本功能后，不对程序界面进行打磨妆点，那么过于素颜的界面，对用户是产生不了吸引力的。对于网页应用而言，用来美化界面的技术，一直都是CSS,CSS是一种好技术，它能将界面的美化和程序的功能逻辑进行良好的分离。特别是它的选择子功能，能够让开发者针对某个具体控件进行美化。

然而在React 框架下，我们不好继续使用CSS来设计界面，这是由 React的设计思想所决定的。React的核新思想是，让每一个控件成为高度可重用的独立个体，这就要求控件的界面设计逻辑和它的功能逻辑必须整合到一起，

在原有逻辑下，控件的功能逻辑由js编写，控件的呈现界面由css负责，两者是分离的。那么React 是怎么把他们结合在一起，同时，又能保证逻辑上的耦合度尽量降低的呢。其实React 并不拒绝使用CSS来设计界面，先从我们熟悉的css开始，慢慢过渡到React 的界面设计方式上来。

首先在目录下新建一个空白文件叫style.html,然后我们先完成程序的基本框架代码

1，先使用css来设计界面元素

<!DOCTYPE  html>
<html><head><title>Styling in  React</title><script src="react.js"></script><script src="react-dom.js"></script><script src="browser.min.js"></script><style type="text/css">#container {padding: 50px;background-color: #FFF;}</style><body><div id="container"></div></body></head>
</html>

接下来我们先在界面上显示一些信息：

<script type="text/babel">var Letter  =   React.createClass({render:function()  {return (<div>{this.props.children}</div>);}});var destination = document.querySelector("#container");ReactDOM.render(<div><Letter>T</Letter><Letter>Y</Letter><Letter>L</Letter><Letter>E</Letter><Letter>R</Letter></div>,destination)
</script>

在代码中，我们先创建一个Letter组件，在组件中，我们直接使用了它的一个属性叫children, 在下面的代码中，我们使用Letter 组件时，在它的标签中夹着一个字母，分别是T,Y,L,E,R.夹在组件标签中的元素，就对应于该组件的孩子，也就是this.props.children.

使⽤css来对我们在界面上显示的几个字母进行妆点。

div div div {padding: 10px;margin: 10px;background-color: #ffde00;display:   inline-block;color: #333;display:   inline-block;font-family:   monospace;font-size: 32px;text-align:    center;
}

可以看到，这种做法，当我们的界面组合间套层次很深时，就很容易出错了，而且代码逻辑很难维护。一个好的做法是，通过类名来确定选择子，代码如下

.letter {padding:   10px;margin:    10px;background-color:  #ffde00;display:   inline-block;color: #333;display:   inline-block;font-family:   monospace;font-size: 32px;text-align:    center;
}
var Letter  =   React.createClass({render:function()  {return (<div className="letter">{this.props.children}</div>);}
});

接下来我们看看，如何以react的方式来修饰界面

按照React的组件化原则，控件的界面逻辑和业务逻辑，需要放在在一起。这样，原来用css设计元素界面的办法就不适用了。React 的做法是，把界面的设计逻辑做成一个对象，放在组件内部，代码如下：

var Letter  =   React.createClass({render:function() {var letterStyle = {padding:10,margin:10,backgroundColor:"#ffde00",color: "#333",display: "inline-block",fontFamily: "monospace",fontSize: 32,textAlign: "center"};return (<div style={letterStyle}>{this.props.children}</div>);}
});

把原来的css代码逻辑转变成了一个json格式的js对象。在组件的jsx代码中，使用style关键字，把界面设计逻辑所形成的对象，引入进来。在组件中设置界面逻辑时，需要注意以下几点： 1是，在指定数值大小时，可以忽略掉px后缀。例如在指定 padding, margin, fontSize 这些属性的值时，数值后面无需添加后缀。也就是原来在css中，需要以px结尾的数值，在React 组件中，px都可以去掉。但其他数值，如果不是以px结尾的，那么相关后缀仍然需要保留。

接下来，我们让组件样式设计更灵活一些，我们看看如何实现组件背景颜色的参数化。

当前我们字母背景色是写死成黄色的，如果该背景色能随时变化，那感觉就相当酷了。使用组件的属性机制，我们的代码修改如下：

var Letter  =   React.createClass({render:function()  {var letterStyle    =   {padding:   10,margin: 10,backgroundColor:this.props.bgcolorcolor:  "#333",display:    "inline-block",fontFamily: "monospace",fontSize:   32,textAlign:  "center"};return (<div style={letterStyle}>{this.props.children}</div>);}
});
var destination =   document.querySelector("#container");
ReactDOM.render(<div><Letter bgcolor="#58B3FF">T</Letter><Letter bgcolor="#FF605F">Y</Letter><Letter bgcolor="#FFD52E">L</Letter><Letter bgcolor="#49DD8E">E</Letter><Letter bgcolor="#AE99FF">R</Letter></div>,destination);

结论：

传统的开发方法是把业务逻辑，界面设计分别分布在html, js, 和css中，这种做法在开发简单网页应用时是可以的。但当我们需要开发复杂的可重用组件时，原有方法就不适合了，因为原来的做法把业务逻辑和界面设计分隔开，而组件化设计需要把所有相关逻辑都得整合在一起。

当今趋势是，网页应用越来越复杂，功能也越来越强大，依赖 React的设计开发方法将是未来网页应用开发的主流。原有业务逻辑与界面设计逻辑相互分开的做法，与当下网页应用越来越复杂，功能也越来越强大的趋势，应当是不相符合的。

React 界面样式设计相关推荐

vue 新手指引_精通react/vue组件设计之快速实现一个可定制的进度条组件
前言这篇文章是笔者写组件设计的第四篇文章,之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根 ...
Android微信界面的设计
Android微信界面的设计 [尊重原创,转载请注明出处]http://blog.csdn.net/guyuealian/article/details/51777792 微信6.0主界面: (1 ...
react中样式冲突_如何通过React中的样式使您的应用漂亮
react中样式冲突 by Vinh Le 由Vinh Le 如何通过React中的样式使您的应用漂亮 (How to make your apps pretty with styling in Re ...
this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs
改变this指向的几种方式: //1.使用箭头函数代替原始函数写法:getState=()=>{}//2.在函数调用时给函数名加bind(this)方法:(bind中第一个参数表示修改this指 ...
Android Studio (15)---界面原型设计
界面原型设计我们常说用户体验用户体验,用户使用你的软件,第一个会接触的是什么?没错,图形化界面(GUI),简称UI,对于用户而言,最直观,给用户留下第一印像的是往往是程序的界面,而非功能!人,总喜欢 ...
Android 应用开发（31）---界面原型设计
界面原型设计我们常说用户体验用户体验,用户使用你的软件,第一个会接触的是什么?没错,图形化界面(GUI),简称UI,对于用户而言,最直观,给用户留下第一印像的是往往是程序的界面,而非功能!人,总喜欢 ...
UI设计灵感|仪表盘界面如何设计？优质案例给你帮助
根据不同的数据类型和设计目的进行区分,可视化图表可以设计成不同的形式,没有思路的时候,更多的设计师到集设网 www.ijishe.com 交流学习社区进行头脑风暴,来看看仪表盘界面如何设计?来看看这1 ...
设计灵感|音乐播放器App界面如何设计？
音乐播放器 App 界面要怎么设计?来看看集设网精选的 12 款移动端音乐播放器,学习一下如何设计出一个易用性和交互性良好.设计感受舒适.展示层级清晰的界面. 音乐播放器App界面如何设计? - 集设 ...
javascript php 界面,js实现卡片式项目管理界面UI设计效果_javascript技巧
这是一款非常有创意的卡片式项目管理界面UI设计效果.该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息. 该 ...

React 界面样式设计

React 界面样式设计相关推荐

最新文章

热门文章