React简介和组件的介绍

作者: 爱吃芋圆的小w | 来源:发表于2019-06-08 23:32 被阅读7次

本人在阅读本书之前,对于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的精髓——函数式编程也节省了很多冗余代码的编写,便于测试。

相关文章

  • React简介和组件的介绍

    1. React简介 2. JSX语法 3. React组件 4. 个人总结 本人在阅读本书之前,对于React只...

  • React Hook

    简介 :原本函数组件和类组件同为react组件,但是由于函数组件为无状态组件,react hook 的引入,让函数...

  • React基础

    react 教程 react 组件介绍 react state 介绍 react Props 介绍 React:组...

  • React组件名大小写

    React组件介绍 React中,组件是可分为函数组件和类组件,不管哪种方式定义的组件,其组件名都必须是大写 大小...

  • React基础

    React包含react元素和react组件 react元素 react组件 react组件分为函数组件和类组件 ...

  • React概念

    介绍 React的核心思想是:封装组件。React大体包含下面概念: 组件React 应用都是构建在组件之上。上面...

  • React-native之开源轮播组件react-native-

    一. 简介 这节介绍下使用第三方轮播组件react-native-swiper,github地址:https://...

  • react组件

    第二单元(react的组件-state-props-setState) 课程目标 组件的基本介绍 理解组件和组件的...

  • react的SPA实践

    上一篇关于react简介与入门的文章【写了个假react】,文章最后介绍了通过组件的嵌套来实现页面构建的思路,这是...

  • npm: react-beautiful-dnd

    简介react-beautiful-dnd基于react的一个组件库,主要包含三个组件. DragDropCont...

网友评论

    本文标题:React简介和组件的介绍

    本文链接:https://www.haomeiwen.com/subject/ytnwxctx.html