React简介和组件的介绍


本人在阅读本书之前,对于React只是通过官方文档的学习对React有一个基本的了解,但是对于React的很多知识面都不了解,因此希望通过这本书更全面熟练地掌握React框架。
这周细致阅读了该书第一章(初入React世界)的前三小节。

1. React简介

  • React主要有三个不同于其他框架的特点:
    • 专注视图层
      React与其他框架最明显的不同是React专注于提供view层解决方案,它并不是一个完整的MVC/MVVM框架,不仅仅如此,它还是一个包含View和Controller的库。对于复杂的应用,可以根据应用场景自行选择业务层框架,并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。
    • 虚拟DOM树
      相比较传统的页面开发需要每次更新都重新操作DOM相比,React做出了很大的优化,它把真实 DOM 树转换成 JavaScript 对象树(虚拟DOM),每次更新时,会重新计算虚拟DOM并与上一次的进行比较,只更新变化的部分。而且React的生命周期之一shouldComponentUpdate也是通过只更新变化的部分来减少DOM消耗、优化性能。
    • 函数式编程
      函数式编程是React的精髓。所谓函数式编程就是构建一个规则以去减少冗余的代码,而这个规则可以被反复的使用。React可以将需要重复构建的UI过程抽象为组件,根据传入参数的不同区渲染不同的页面。

2. JSX语法

  • 什么是JSX
    • React 是通过创建与更新虚拟元素(virtual element)来管理整个 Virtual DOM 的。虚拟元素其实就是真实元素的映射,它的构建和更新都是在内存中完成的不会渲染到真正的DOM中。React创建的虚拟元素可分为:DOM元素和自定义元素。
    • JSX就是React用于构建虚拟元素的语法。它将HTML语法直接添加到JavaScript代码中,然后通过Babel的JSX编译器转换为纯JS后给浏览器执行。
  • JSX基本语法
    • JSX的基本语法分为XML基本语法和元素类型属性两部分:
    1. XML基本语法
      XML语法实际上和写HTML一样,只不过它被包裹在 JavaScript 的方法中
      但是和写HTML不同的是,需要注意两点:
      1.定义标签时,只允许被一个标签包裹。
      2.所有标签一定要闭合,否则编译无法通过。
    2. 元素类型属性
      1.元素类型分为两部分:DOM元素和自定义元素。
      2.元素属性最主要分为:
      a.boolean属性:如果写了boolean属性值JSX会默认为true,不写就是false
      b.展开属性:如果不知道组件需要哪些属性时,可以用扩展运算符...来提高效率。

3. React组件

React组件基本上由组件的构建方式、组件内的属性状态与生命周期方法组成。

  1. 组件的演变过程
    a. 传统的组件都要几个明显的特点:1.简单封装 2.简单的生命周期呈现 3.明显的数据流动。但是当一个项目的逻辑交互较为复杂时,传统的组件化根本不能很好的将结构样式和行为结合,让项目难以维护。
    b. React组件基本分为3部分:属性(props)、状态(state)、生命周期。
      Ract组件可以传入props,也有自己的state,当传入的属性或自身状态发生改变时,就会执行相应的生命周期方法重新渲染页面。
      React组件即遵循了传统的组件的职责,又做出来新的改变和优化——将HTML完全引入JS中。
  2. 组件的构建方式
     组件的构建方式有三种:
      a.React.createClass
      b.ES6 classes创建类
      c.无状态函数(只传入props和context)

4. 个人总结

在阅读了前三节后,个人对于React的部分基本概念有了更全面的认识,在此之前,我其实一直不太清楚React与其他框架比如Vue、Angular,现在我认识到了:
 1. React最大的好处就是它的跨平台优势,react-native能让你用相同的组件模型编写有本地渲染能力的 APP (iOS 和 Android)。还能同时跨平台开发。
 2. React很灵活,它的虚拟DOM的概念很大程度提高了性能优化和资源节约,这一点和Vue相似。而且React的精髓——函数式编程也节省了很多冗余代码的编写,便于测试。

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

推荐阅读更多精彩内容

  • 40、React 什么是React?React 是一个用于构建用户界面的框架(采用的是MVC模式):集中处理VIE...
    萌妹撒阅读 1,001评论 0 1
  • 1.RN简介 React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架...
    smart_yang阅读 19,379评论 0 8
  • React简介 (1)简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaSc...
    鱼鱼吃猫猫阅读 1,609评论 1 6
  • 原教程内容详见精益 React 学习指南,这只是我在学习过程中的一些阅读笔记,个人觉得该教程讲解深入浅出,比目前大...
    leonaxiong阅读 2,809评论 1 18
  • 《六项精进》打卡第133天 姓名:李月红 公司: 宁波市镇海承迪文具有限公司 组别:感谢二组 【知~学习】 背《六...
    嗨_李迪阅读 104评论 0 0