React 我就是要把Html和JavaScript混在一起!

时间:2021-1-8 作者:admin

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放在不同的文件当中,在运行时把他们结合起来, 但是这种分离只是技术层面分开管理而已,在逻辑上并没有实现高耦合的组件,也就无法复用。

![](https://example.com/61d9976d951dae9c253df6995974d9fe)

“我想了一个新的办法,” 小伙子继续说道,“组件化,我们可以创建一个个的组件,然后让这些组件组合起来形成一个完整的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!          

            Click Count : {this.state.count}          

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。