这里是普通文章模块栏目内容页
ReactJS :我就是想把代码和HTML混在一起!

当我走进这个著名的咖啡馆,这里已经有很多人了,我环顾四周,看到远处的JSP同学和ASP同学正聊得火热,他俩,还有今天没看见的Velocity同学每次都会占据最里边的座位,似乎故意要逃避大家。

从他们的表情看,我就能猜出来这两个家伙又在抱怨人心不古,世风日下,没有程序员使用他们了。

旁边是jQuery和ExtJS, 他俩在低声交谈,时不时朝JSP和ASP方向看两眼, 我估计jQuery又在宣传他那DOM操作大法了。

幸好,还有一个靠窗的空桌,有两个座位, 我走过去坐下,要了一杯咖啡,拿起一本杂志,边喝边看。

ReactJS :我就是想把代码和HTML混在一起!

代码中混杂HTML

这时候又进来一个年轻人,看到我这一桌还有空位,不客气地坐下, 掏出一张纸,爬在桌子上刷刷刷地写代码

我偷偷看了一眼,不由得大吃一惊: 怎么能在代码中写HTML呢?

function Welcome(props) {     

    return <h1>Hello, {props.name}</h1>; 

这时候服务员正好走过来送咖啡, 也注意到了这段代码, 大叫道:“我赛,这都什么年代了,还在代码里写HTML !”

这一下便炸了锅,ASP, JSP, jQuery, ExtJS等纷纷围过来看个究竟。

在代码中写HTML,我记得这是上个世纪90年代的事情,那时候连ASP,JSP都没有,只好用C语言写CGI代码,HTML就混杂在C代码中,类似这样:

void main(){ 

    char content[MAXLINE]; 

    sprintf(content,"<html>"); 

    sprintf(content,"<head>"); 

    sprintf(content,"<title>Homepage</title>"); 

    sprintf(content,"</head>");  

    ......其他内容略......  

    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" %> 

<html> 

<head><title>我的主页</title></head> 

<body> 

<% For i=3 to 5 %> 

<font size=<%=i%> > 

    你好,欢迎来到我的主页。 

</font> <br /> 

<% Next %> 

</body> 

</html> 

现在又有人想在代码中写HTML,简直是疯了!

模板 vs 组件

看到这么多人围过来, 小伙子涨红了脸:“我这不是HTML,我这个是JSX,是JavaScript的一个语法扩展,你们仔细看看,其实和ASP的模板也很像的。”

<h1>Hello, {props.name}</h1>

“那你为什么不直接用模板,为什么要把HTML放到JavaScript当中?这是我们早就抛弃的反模式!”  ASP问道。

“对啊,为什么不用模板? ”  周围的人也随声附和。

“因为我觉得模板难于复用!” 小伙子突然大声说道。

说起复用,这一点我的体会太深了,在开发中,我通常把描述界面结构的HTML,描述展示的CSS, 和操作DOM的JavaScript放在不同的文件当中,在运行时把他们结合起来, 但是这种分离只是技术层面分开管理而已,在逻辑上并没有实现高耦合的组件,也就无法复用。

ReactJS :我就是想把代码和HTML混在一起!

#p#分页标题#e#

“我想了一个新的办法,” 小伙子继续说道,“组件化,我们可以创建一个个的组件,然后让这些组件组合起来形成一个完整的Web界面。 就像我刚写的组件Welcome,可以复用的,可以用在Web页面的任何地方。”

“组件? 这小子有点想法。” ASP说道,“我表哥Visual Basic 就有很多组件,奥,好像大家叫他控件,在开发一个应用的时候,只需要把控件拖拽到表单界面上,设置属性,编写对事件的处理代码就可以了,非常简单快速。”

“你怎么没给我说过?” JSP表示不满, 他和ASP在90年代打得你死我活,现在抛弃了门户之见,成了好基友。

小伙子向ASP投去感激的目光,找到支持支持者了。

没想到ASP马上泼了一盆冷水:“不过控件是在桌面应用使用的,在Web开发中我们不这么干,它和桌面应用差别太大,实现不了。”

小伙子马上反驳:“怎么实现不了,一个组件不就是一个可以复用的单元吗? 在Web页面上, 这个组件要像桌面应用那样,负责自己的展示和行为,有属性可以设置,有方法可以调用,对外可以响应事件(Event), 对内可以维护组件状态。”

我说道:“你说说你那个Welcome组件具体怎么复用?”

小伙子说: “很简单,在JSX中,那个Welcome组件就像普通的HTML标签一样,直接就可以使用了!”

function App(props){ 

  return

    <div>      

      <Welcome name="码农翻身" /> 

      <Welcome name="张大胖" />       

    </div> 

  ); 

确实是不错,这些自定义的标签(组件),可以一层层地组合起来,构建成一个大的页面。

有状态的组件

还是jQuery经验老道,他眯着眼看了半天,开始发难:“你号称是组件,但组件都是有内部状态的,而你这代码就是一个函数而已,一个输入,一个输出,根本不是组件!”

小伙子说:“你说得没错,那个组件是个无状态的组件,只有输入和输出,我给你看个有状态的组件。”

class Counter extends React.Component{ 

   constructor(props){ 

     super(props); 

     this.state = {count : 0}; 

   } 

   handleClick(){ 

     this.setState({count: this.state.count + 1}); 

   } 

   render(){ 

     return ( 

       <div> 

         <button onClick={(e) => this.handleClick(e)}>Click!</button> 

         <h3> 

           Click Count : {this.state.count

         </h3> 

       </div> 

     ); 

   } 

 } 

这个组件一下子就复杂多了,似乎是一个继承了Component的类,有构造器,有函数,还有个返回HTML的render方法。

小伙子说:“看到没有,这是一个用来计数的小组件, 数值被保存起来了,就是那个 this.state.count ,初始值为0, 每次点击就会调用this.setState函数,把count 加一。”

小伙子说着在浏览器中给我们展示了一下效果,果然,每次点击,Count数都会变化。

ReactJS :我就是想把代码和HTML混在一起!

我们看了以后都有一个感觉,这确实是一个组件,你看它内部有展示的逻辑,有状态,有操作,自己的活儿自己干。

“state ? 你不是有props吗? 还用state ? ” ExtJS 看到jQuery沉默了,马上为朋友两肋插刀。

小伙子说道:“是这样的,我用props 来保存从上层组件(父组件)传递过来的数据,用state来保存本组件的内部数据。”

jQuery道:“父组件可以用props给子组件传递数据,那子组件如果想把数据告诉父组件,该怎么处理?”

#p#分页标题#e#

小伙子向jQuery投去佩服的目光, 回答道:“这个问题我想过了,父组件可以用props传递一个'钩子'函数给子组件,在必要的时候,子组件就调用这个函数,把数据告知父组件。”

UI = render(data)

jQuery不甘心,想了一会儿,又抛出一个重磅炸弹:“怪哉怪哉,从你这个Counter组件中,怎么看不到对DOM的操作? 如果没有DOM操作,你怎么实现点击了Click! 按钮以后,下面的数目发生变化的? ”

jQuery是操作DOM的高手,什么链式调用了,选择器了被他玩得贼溜,现在看到Counter组件中连一行DOM操作的代码都没有,颠覆了自己的人生观,肯定要弄个究竟。

“我估计大家都用JavaScript操作过DOM,说实话,很简单,很直观,可是当项目变得复杂以后, 当页面上的事件处理多了以后, JavaScript的代码会和DOM紧密地纠缠在一起,就不好维护了。”  小伙子说道。

ReactJS :我就是想把代码和HTML混在一起!

大家都纷纷点头。

“所以呢, 所以我就想办法把他屏蔽了,在我这里,不用操作DOM,只要你调用setState方法,我发现数据发生了变化,我就会渲染整个页面。所以对程序员来讲,在概念上非常简单,只需要setState,剩下的操作都交给我。 用个公式来表达就是 UI = render(data) 。  ”

“嘶.....”    听到这个“渲染整个页面”,大家伙都倒吸了一口凉气。如果一个页面有很多数据,现在只改变了一个小小的count的数值 ,难道还要把其他的也全部渲染一遍?

看到大家疑惑的表情,小伙子笑了笑,解释道:“全部渲染是从概念上来说的,在实现层面,还是局部更新。为了实现这一点,我特意实现了一个虚拟的DOM。”

ReactJS :我就是想把代码和HTML混在一起!

“每次数据发生了变化,我会比较两个虚拟DOM的区别,找到那些数据真正发生改变的地方,然后操作真正的DOM, 这样以来,其实真正的更新还是局部的。”

ReactJS :我就是想把代码和HTML混在一起!

看到了虚拟DOM, 大家都明白这小伙子绝对不是一般人了!。

但是看到那混杂着代码和HTML的,试图改变Web开发方式的“组件”,都觉得不可思议,难以接受,摇着头,慢慢地散开了。

ASP一边走一边给JSP说:“这玩意儿,太颠覆了,根本不会有人用。”

JSP同意:“是啊,我们还是玩模板去吧。”

人走得差不多了,我问小伙子:“你叫什么名字? ”

“ReactJS。”

“有没有兴趣到我们公司工作? ” 我递上了我的名片,上面印着我们公司的Logo : Facebook。

ReactJS :我就是想把代码和HTML混在一起!

【本文为51CTO专栏作者“刘欣”的原创稿件,转载请通过作者微信公众号coderising获取授权】

戳这里,看该作者更多好文

【编辑推荐】

踩坑实战:如何走出“万劫不复”的代码重构深渊?

为什么阿里工程师纷纷在内网晒代码?

程序员,除了写好代码,你更应该看5月的这十篇热门文章!

爬了菊姐2W条微博评论,竟发现“菊粉”都是这样的人!(附代码)

收藏
0
有帮助
0
没帮助
0