React 入门--组件

React是一个用于创建UI组件的框架,它的核心就是组件
  组件实际上并不难理解,在传统的桌面编程中,组件实际上就是一个个的控件,开发者无须编写代码就可以直接从IDE的控件箱中拖控件来创建简单的应用程序。而对应到前端来说,我们一开始见到的一些组件可能是来自Dreamweaver自带的一些简单的web小控件,例如单行文本框,单选/多选框以及下拉列表等等,实际上这些控件所提供的功能对前端开发者来说太过于简陋,甚至可以说是丑陋。当我们脱离了刀耕火种的时代,前端组件化需求就显得十分迫切
  在当下有很多框架实现了组件化,例如非常火爆的bootstrap,有一点需要区分的是前端组件化(Web Components)和模块化(module),它们是不同的概念。关于这两点的具体区别将在后续文章中详细介绍,我们首先应该关注的是组件化

React中的组件


在上一篇文章中,我们使用React创建了一个简单的应用程序,它可以在页面上渲染出"Hello World!"。其中React.createClass所创建的Hello对象就是一个组件,我们可以使用同样的方法创建出更多不同功能的组件以便于重复使用,而且组件可以相互嵌套,例如:

var Hello =React.createClass({
  render:function (){
    return (
      <div>
        <h1>This is my first web components!</h1>
        <Keke></Keke>      {/*Keke作为子组件被嵌套在Hello组件中*/}
      </div>
    )
  }
});
var Keke=React.createClass({
  render:function (){
    return (
      <h2>ReactJS is good!</h2>
    )
  }
});

这个例子中,首先创建了一个Hello组件,它包含一个h1标签,然后创建了一个Keke组件,包含一个h2标签,在Hello组件中可以将Keke组件像一个普通的HTML标签一样插入进来,语法依然像HTML一样可以是闭合标签<Keke></Keke>也可以是自闭合标签<Keke/>,这也是JSX语法的特点之一。
  使用React创建组件可以任意的嵌套,每个组件的UI以及逻辑相互独立,拿掉任何一个组件不会影响应用程序的正常运行。这样一来可以将一个web页面切分为很多个组件,非常便于后期维护。

属性与状态


在React为数不多的概念中,属性(props)与状态(state)可能是最让初学者头疼的,在一个React组件中,它们是这样工作的。

var myName="Sakura";
//定义myName变量
var MyComponents=React.createClass({
  getInitialState:function (){    {/*初始化state*/}
    return {
      user:this.props.user      {/*将user属性赋值给user状态*/}
    }  
  },
  render:function (){
    return (
        <div>
          <h1>My name is {this.state.user}</h1>
          {/*user状态可以使用this.state获取到*/}
        </div>
    )
  }
});
ReactDOM.render(
  {/*将myName变量作为MyComponents组件的user属性传入*/}
  <MyComponents user={myName}/>,
  document.getElementById("app")
);

这个例子中,this.props是组件的属性,组件的属性props必须通过父组件向下传递,在ReactDOM.render方法中,我们把myName变量作为一个属性传递给了MyComponents组件,并且命名为user,而在这个组件内部,我们可以使用this.props.user得到这个属性。
  状态是React组件中的一个对象,用于存放组件相关数据。React把用户界面当做一个状态机,状态的更新会引起组件的重新渲染,从而使数据与界面保持一致。getInitialState方法用于定义状态的初始值,在这个例子中user状态的初始值是由传入的user属性决定的。状态与界面息息相关,一切与界面相关的数据都应存放在state中,更新state可以使用this.setState方法,React不允许直接通过this.state.xxx=xxx的方式直接修改state。
  propsstate两者的区别是:props是用于父组件向子组件传递数据的通道,而state则是组件存放自身相关信息的一个对象

单向数据流


React的数据是自顶向下的单向数据流,在一个React应用程序中,数据由父组件通过props自顶向下传递给子组件,子组件接收到数据后,可以将props中的属性作为自身的一个状态(state)用于渲染界面。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345

推荐阅读更多精彩内容

  • 最近看了一本关于学习方法论的书,强调了记笔记和坚持的重要性。这几天也刚好在学习React,所以我打算每天坚持一篇R...
    gaoer1938阅读 1,666评论 0 5
  • React组件有自己的生命周期方法,React将组件从挂载(Mounting)-->更新(Updating)-->...
    我的秀阅读 297评论 0 0
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,506评论 25 707
  • 不同固体物质的导热性 一、教学目标 知识与技能:了解固体不同于气体与液体,热在固体中是以传导的方式进行传递。 过程...
    耿晓蓉阅读 701评论 0 0
  • 文/熊子川 我想,是时候重新审视甚至抛弃Persona这样的实践了。Persona作为以人为中心的设计方法论中不可...
    ThoughtWorks阅读 506评论 0 3