Hello, {props.name};}
(友情提示：可左右滑动) 这时候服务员正好走过来送咖啡， 也注意到了这段代码， 大叫道：“我赛，这都什么年代了，还在代码里写HTML ！” 这一下便炸了锅，ASP, JSP, jQuery, ExtJS等纷纷围过来看个究竟。 在代码中写HTML，我记得这是上个世纪90年代的事情，那时候连ASP,JSP都没有，只好用C语言写CGI代码，HTML就混杂在C代码中，类似这样：
void main(){ char content[MAXLINE]; sprintf(content,””); sprintf(content,””); sprintf(content,”Homepage”); sprintf(content,””); ……其他内容略…… printf(“Content-length : %d \r\n”,(int)strlen(content)); printf(“Content-type:text/html \r\n\r\n”); printf(“%s”,content); fflush(stdout); exit(0);}
(友情提示：可左右滑动) 这种模式给修改界面和业务逻辑带来了巨大的麻烦，等到ASP, JSP这样的“模板”语言出现以后，变成了在HTML中写代码： UI设计师先把HTML页面整体设计好，交给程序员再用<%..%>在其中填入动态的部分， 这种方式可以让设计师和程序员更好地合作。
<%@ Language=”VBScript” %>我的主页<% For i=3 to 5 %><font size=<%=i%> > 你好，欢迎来到我的主页。 <% Next %>}
现在又有人想在代码中写HTML，简直是疯了！
模板 vs 组件
看到这么多人围过来， 小伙子涨红了脸：“我这不是HTML，我这个是JSX，是JavaScript的一个语法扩展，你们仔细看看，其实和ASP的模板也很像的。”
<h1>Hello, {props.name}</h1>
“那你为什么不直接用模板，为什么要把HTML放到JavaScript当中？这是我们早就抛弃的反模式！” ASP问道。
“对啊，为什么不用模板？ ” 周围的人也随声附和。
“因为我觉得模板难于复用！” 小伙子突然大声说道。
说起复用，这一点我的体会太深了，在开发中，我通常把描述界面结构的HTML，描述展示的CSS， 和操作DOM的JavaScript放在不同的文件当中，在运行时把他们结合起来， 但是这种分离只是技术层面分开管理而已，在逻辑上并没有实现高耦合的组件，也就无法复用。
“我想了一个新的办法，” 小伙子继续说道，“组件化，我们可以创建一个个的组件，然后让这些组件组合起来形成一个完整的Web界面。 就像我刚写的组件Welcome，可以复用的，可以用在Web页面的任何地方。”
“组件？ 这小子有点想法。” ASP说道，“我表哥Visual Basic 就有很多组件，奥，好像大家叫他控件，在开发一个应用的时候，只需要把控件拖拽到表单界面上，设置属性，编写对事件的处理代码就可以了，非常简单快速。”
“你怎么没给我说过？” JSP表示不满， 他和ASP在90年代打得你死我活，现在抛弃了门户之见，成了好基友。
小伙子向ASP投去感激的目光，找到支持支持者了。
没想到ASP马上泼了一盆冷水：“不过控件是在桌面应用使用的，在Web开发中我们不这么干，它和桌面应用差别太大，实现不了。”
小伙子马上反驳：“怎么实现不了，一个组件不就是一个可以复用的单元吗？ 在Web页面上， 这个组件要像桌面应用那样，负责自己的展示和行为，有属性可以设置，有方法可以调用，对外可以响应事件(Event)， 对内可以维护组件状态。”
我说道：“你说说你那个Welcome组件具体怎么复用？”
小伙子说： “很简单，在JSX中，那个Welcome组件就像普通的HTML标签一样，直接就可以使用了！”
function App(props){ return(
);}
确实是不错，这些自定义的标签（组件），可以一层层地组合起来，构建成一个大的页面。 有状态的组件 还是jQuery经验老道，他眯着眼看了半天，开始发难：“你号称是组件，但组件都是有内部状态的，而你这代码就是一个函数而已，一个输入，一个输出，根本不是组件！” 小伙子说：“你说得没错，那个组件是个无状态的组件，只有输入和输出，我给你看个有状态的组件。”
class Counter extends React.Component{ constructor(props){ super(props); this.state = {count : 0}; } handleClick(){ this.setState({count: this.state.count + 1}); } render(){ return (
<button onClick={(e) => this.handleClick(e)}>Click!
点击咨询 