一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：
－ 通过前端模板引擎定义结构
－ JS文件中写自己的逻辑
－ CSS中写组件的样式
－ 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖，
那么在React中是什么样子呢？
结构和逻辑
在React的世界里，结构和逻辑交由JSX文件组织，React将模板内嵌到逻辑内部，实现了一个JS代码和HTML混合的JSX。
结构
在JSX文件中，可以直接通过 React.createClass 来定义组件：
var CustomComponent = React.creatClass({
render: function(){
return (<div className="custom-component"></div>)
}
})
通过这种方式可以很方便的定义一个组件，组件的结构定义在render函数中，但这并不是简单的模板引擎，我们可以通过js方便、直观的操控组件结构，比如我想给组件增加几个节点：
var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return (<span>{str}</span>)
})
return (<div className="custom-component">{$nodes}</div>)
}
})
通过这种方式，React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢？
逻辑
写过前端组件的人都知道，组件通常首先需要相应自身DOM事件，做一些处理。必要时候还需要暴露一些外部接口，那么React组件要怎么做到这两点呢？
事件响应
比如我有个按钮组件，点击之后需要做一些处理逻辑，那么React组件大致上长这样：
var ButtonComponent = React.createClass({
render: function(){
return (<button>屠龙宝刀，点击就送</button>)
}
})
点击按钮应当触发相应地逻辑，一种比较直观的方式就是给button绑定一个 onclick 事件，里面就是需要执行的逻辑了：
function getDragonKillingSword() {
//送宝刀
}
var ButtonComponent = React.createClass({
render: function(){
return (<button onclick="getDragonKillingSword()">屠龙宝刀，点击就送</button>)
}
})
但事实上 getDragonKillingSword() 的逻辑属于组件内部行为，显然应当包装在组件内部，于是在React中就可以这么写：
var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送宝刀
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>)
}
})
这样就实现内部事件的响应了，那如果需要暴露接口怎么办呢？
暴露接口
事实上现在 getDragonKillingSword 已经是一个接口了，如果有一个父组件，想要调用这个接口怎么办呢？
父组件大概长这样：
var ImDaddyComponent = React.createClass({
render: function(){
return (
<div>
//其他组件
<ButtonComponent />
//其他组件
</div>
)
}
})
那么如果想手动调用组件的方法，首先在ButtonComponent上设置一个 ref="" 属性来标记一下，比如这里把子组件设置成 <ButtonComponent ref="getSwordButton"/>，那么在父组件的逻辑里，就可以在父组件自己的方法中通过这种方式来调用接口方法：
this.refs.getSwordButton.getDragonKillingSword()
看起来屌屌哒~那么问题又来了，父组件希望自己能够按钮点击时调用的方法，那该怎么办呢？
配置参数
父组件可以直接将需要执行的函数传递给子组件：
<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>
然后在子组件中调用父组件方法：
var ButtonComponent = React.createClass({
render: function(){
return (<button onClick={this.props.clickCallback}>屠龙宝刀，点击就送</button>)
}
})
子组件通过 this.props 能够获取在父组件创建子组件时传入的任何参数，因此 this.props 也常被当做配置参数来使用
屠龙宝刀每个人只能领取一把，按钮点击一下就应该灰掉，应当在子组件中增加一个是否点击过的状态，这又应当处理呢？
组件状态
在React中，每个组件都有自己的状态，可以在自身的方法中通过 this.state 取到，而初始状态则通过 getInitialState() 方法来定义，比如这个屠龙宝刀按钮组件，它的初始状态应该是没有点击过，所以 getInitialState 方法里面应当定义初始状态 clicked: false 。而在点击执行的方法中，应当修改这个状态值为 click: true ：
var ButtonComponent = React.createClass({
getInitialState: function(){
//确定初始状态
return {
clicked: false
}
},
getDragonKillingSword: function(){
//送宝刀
//修改点击状态
this.setState({
clicked: true
})
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>)
}
})
这样点击状态的维护就完成了，那么render函数中也应当根据状态来维护节点的样式，比如这里将按钮设置为 disabled ，那么render函数就要添加相应的判断逻辑：
render: function(){
var clicked = this.state.clicked
if(clicked)
return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>)
else
return (<button onClick={this.getDragonKillingSword}>屠龙宝刀，点击就送</button>)
}
小节
这里简单介绍了通过JSX来管理组件的结构和逻辑，事实上React给组件还定义了很多方法，以及组件自身的生命周期，这些都使得组件的逻辑处理更加强大
资源加载
CSS文件定义了组件的样式，现在的模块加载器通常都能够加载CSS文件，如果不能一般也提供了相应的插件。事实上CSS、图片可以看做是一种资源，因为加载过来后一般不需要做什么处理。
React对这一方面并没有做特别的处理，虽然它提供了Inline
Style的方式把CSS写在JSX里面，但估计没有多少人会去尝试，毕竟现在CSS样式已经不再只是简单的CSS文件了，通常都会去用Less、
Sass等预处理，然后再用像postcss、myth、autoprefixer、cssmin等等后处理。资源加载一般也就简单粗暴地使用模块加载器
完成了
组件依赖
组件依赖的处理一般分为两个部分：组件加载和组件使用
组件加载
React没有提供相关的组件加载方法，依旧需要通过 <script>标签引入，或者使用模块加载器加载组件的JSX和资源文件。
组件使用
如果细心，就会发现其实之前已经有使用的例子了，要想在一个组件中使用另外一个组件，比如在 ParentComponent 中使用 ChildComponent ，就只需要在 ParentComponent 的 render() 方法中写上 <ChildComponent />就行了，必要的时候还可以传些参数。
疑问
到这里就会发现一个问题，React除了只处理了结构和逻辑，资源也不管，依赖也不管。是的，React将近两万行代码，连个模块加载器都没有提供，更与Angularjs，jQuery等不同的是，他还不带啥脚手架…没有Ajax库，没有Promise库，要啥啥没有…
虚拟DOM
那它为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起
如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产
生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。
这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS
操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提
供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。
而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的
JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff
算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会
有较大提升
本文前提 是电脑里已经顺利安装了ruby,sass等之后，再进行webstorm中配置sass的watcher，以及改变watcher中的默认选项；如果以上都还没有做，可以自行百度解决，很容易找到的；
本文使用的webstorm为11.0版本
点击左上角的 *File→Settings→File Watchers ***
在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择scss
然后按照下图进行操作：
其中黄色的地方都要填好，program那里是你安装ruby中响应的scss.bat的路径，如果安装ruby时，你不是按照默认c盘路径按装的话，那么那里是需要需改的；
按道理其中只有两个地方是需要修改的,其他我没有改过,都是默认就是那样的 ：
1、Arguments:
可以配置编译后的文件的输出路径,我这里写的是:
--no-cache --update --sourcemap --watch : \css$FileNameWithoutExtension$.css
注意, 后面有个冒号,然后 表示的是 scss文件所在的文件夹的父级文件夹 ,而不是scss文件的父文件夹.
举个例子,我的项目叫lianxi,里面有个sass文件夹,里面存放scss文件,那么按照这样配置的结果, www.scss 所在的文件夹就是sass,sass的父文件夹就是lianxi,然后找到lianxi下的css文件夹,编译后的 www.css 文件就会在这里.
如图所示：
2、 Output paths to refresh:
改成这样: .css: .css.map
经过以上配置就实现了， webstorm支持sass的同步编译,也就是即写即编译,并且可以指定编译后的css的目录.
这里需要注意两点：
1》同步编译只能在项目文件夹下,也就是webstorm左侧打开的项目.随便打开一个项目外的文件是不行的.
2》这个和webstorm没有什么关系,就是sass编译不能带有中文,无论是路径名,文件名,文件里的内容,都不能识别中文,如果要修改它也不是不可以,但我觉得不用中文也挺好的,养成好习惯嘛.
原文网址摘自于 http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561
1、线上的时候：在模板文件里对css跟js的引入路径后面追加一个类似于常量来做版本号<link rel="stylesheet" href="style.css?version=20150828" />
2、线下测试的时候：对css跟js的引入路径后面追加随机数，时时刻刻更新，避免缓存影响了调试。
3、线下测试后：升级常量的版本号，把代码更新上去，这样用户的浏览器刷新就用到了新的样式，而又用到了缓存。
