牛魔王的故事
一个组件，有自己的结构，有自己的逻辑，有自己的样式，会依赖一些资源，会依赖某些其他组件。比如日常写一个组件，比较常规的方式：－ 通过前端模板引擎定义结构－ 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>);}});