React的基本认识

Facebook开源的一个js库,一个用来动态构建用户界面的js库

英文官网中文官网

React的特点

Declarative(声明式编码),Component-Based(组件化编码),Learn Once, Write Anywhere(支持客户端与服务器渲染),高效,单向数据流

声明式编程:只关注做什么, 而不关注怎么做(流程), 类似于填空题,命令式编程:要关注做什么和怎么做(流程), 类似于问答题

React高效的原因

虚拟(virtual)DOM, 不总是直接操作DOM(批量更新, 减少更新的次数)

高效的DOM Diff算法, 最小化页面重绘(减小页面更新的区域)

React的基本使用

需求:在一个div容器内插入一个元素,效果如下:

导入相关js库文件(react.js(核心库), react-dom.js(提供操作DOM的react扩展库), babel.min.js(解析JSX语法代码转为纯JS语法代码的库))

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

具体代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>01_HelloWorld</title>
</head>
<body>
  <div id="test"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">/*告诉babel.js解析里面的jsx的代码*/
    // 1. 创建虚拟DOM元素对象
    var vDom = <h1>Hello React!</h1>   // 不是字符串
    // 2. 将虚拟DOM渲染到页面真实DOM容器中
    ReactDOM.render(vDom, document.getElementById('test'))
  </script>
</body>
</html>

安装React Devtools调试工具

下载    chrome      react developer tools

安装:打开chrome 浏览器==>更多工具==》扩展程序

将插件拖入 在详细信息中点击启用即可; react developer tools 安装完毕。

虚拟DOM

React提供了一些API来创建一种 `特别` 的一般js对象,纯JS(一般不用)

var element = React.createElement('h1', {id:'myTitle'},'hello') 

上面创建的就是一个简单的虚拟DOM对象

虚拟DOM对象最终都会被React转换为真实的DOM

我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX_DEMO</title>
</head>
<body>
  <h2>前端JS框架列表</h2>
  <div id="test1"></div>
  <div id="test2"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/javascript">
    // 使用React提供了一些API来创建虚拟DOM,没有使用JSX语法的话,可以直接使用type="text/javascript",不用写成bable
    const msg = 'I Like You!'
    const myId = 'Atguigu'

    // 1.创建虚拟DOM对象
    // 第一个参数是标签名,第二个参数是是标签的属性, 第三个参数是标签里的内容
    const vDom1 = React.createElement('h1', {id: myId.toLowerCase()}, msg.toUpperCase())

    //渲染虚拟DOM
    // 第一个参数是虚拟DOM对象, 第二个参数是需要插入的真实DOM元素
    ReactDOM.render(vDom1, document.getElementById('test1'))
  </script>
</body>
</html>

JSX的理解和使用

全称: JavaScript XML,react定义的一种类似于XML的JS扩展语法: XML+JS,作用:是用来创建react虚拟DOM(元素)对象

标签名任意: HTML标签或其它标签 标签属性任意: HTML标签属性或其它

var ele = <h1>Hello JSX!</h1>
//注意1: 它不是字符串, 也不是HTML/XML标签
// 注意2: 它最终产生的就是一个JS对象

JSX基本语法规则

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

遇到以 { 开头的代码,以JS语法解析: 标签中的js代码必须用{ }包含

渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM, containerDOM)

作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

参数说明  参数一: 纯js或jsx创建的虚拟dom对象,参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

只要用了JSX,都要加上type="text/babel", 声明需要babel来处理

需求是在两个div上插入元素,效果如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX_DEMO</title>
</head>
<body>
  <div id="test1"></div>
  <div id="test2"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    const msg = 'I Like You!'
    const myId = 'Atguigu'

    // 1.创建虚拟DOM对象
    const vDom1 = <h1 id={myId.toLowerCase()}>{msg.toUpperCase()}</h1>
    const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>

    //渲染虚拟DOM
    // 第一个参数是虚拟DOM对象, 第二个参数是需要插入的真实DOM元素
    ReactDOM.render(vDom1, document.getElementById('test1'))
    ReactDOM.render(vDom2, document.getElementById('test2'))
  </script>
</body>
</html>

JSX练习,需求: 动态展示列表数据

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>02_JSX_DEMO</title>
</head>
<body>
  <h2>前端JS框架列表</h2>
  <div id="example"></div>

  <script type="text/javascript" src="../js/react.development.js"></script>
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    /*功能: 动态展示列表数据*/
    const names = ['jquery', 'zepto', 'angular', 'vue', 'react']

    // 1.创建虚拟DOM
    const vDom1 = (
      <ul>
        {
          names.map((name, index) => <li key={index}>{name}</li>)
        }
      </ul>
    )

    // 2.渲染虚拟DOM
    ReactDOM.render(vDom1, document.getElementById('example'))
  </script>
</body>
</html>

React框架简介的更多相关文章

  1. 《React Native 精解与实战》书籍连载「React 与 React Native 简介」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  2. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  3. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  4. React框架随笔

    React框架随笔 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了 ...

  5. Vue框架简介及简单使用

    目录 一.前端框架介绍 二.vue框架简介 三.vue使用初体验 1. vue如何在页面中引入 2. 插值表达式 3. 文本指令 4. 方法指令(事件指令) 5. 属性指令 四.js数据类型补充 1. ...

  6. Spring 系列: Spring 框架简介 -7个部分

    Spring 系列: Spring 框架简介 Spring AOP 和 IOC 容器入门 在这由三部分组成的介绍 Spring 框架的系列文章的第一期中,将开始学习如何用 Spring 技术构建轻量级 ...

  7. 《HiWind企业快速开发框架实战》(0)目录及框架简介

    <HiWind企业快速开发框架实战>(0)目录及框架简介 本系列主要介绍一款企业管理系统快速开发框架,该框架旨在快速完成企业管理系统,并实现易维护可移植的目标. 使用逐个系统模块进行编码的 ...

  8. Yaf零基础学习总结1-Yaf框架简介

    从今天开始,给大家讲解下yaf框架,讲解之前肯定要了解下yaf是个什么东西,当然,从标题我们已经知道yaf是个PHP框架了,也许大家对于PHP框架并不陌生,一般PHP程序员用过的框架至少有一两个吧,国 ...

  9. hdwiki 框架简介

    虽然HDwiki是一个开源的wiki系统,并且代码简洁易懂,但如果想在系统上做做进一步开发还需要对框架有一个整体的认识.熟悉了HDwiki的框架以后完全可以独立出来做其他功能的开发,当做一个开源的PH ...

随机推荐

  1. 通过 CLI 管理 Jenkins Server

    Jenkins 内置的命令行接口允许管理员通过命令行工具访问并管理 Jenkins.这让我们可以通过脚本自动化的创建配置或执行任务,也就是把 Jenkins 中的配置代码化了.Jenkins 同时支持 ...

  2. 数据库新秀 postgresql vs mongo 性能PK

    前几天看了一篇文章<High Performance JSON PostgreSQL vs. MongoDB> 发布在Percona Live Europe 2017 作者是<Dom ...

  3. python 浅析模块,包及其相关用法

    今天买了一本关于模块的书,说实话,模块真的太多了,小编许多也不知道,要是把模块全讲完,可能得出本书了,所以小编在自己有限的能力范围内在这里浅析一下自己的见解,同时讲讲几个常用的模块. 这里是2018. ...

  4. 深入学习Python解析并解密PDF文件内容的方法

    前面学习了解析PDF文档,并写入文档的知识,那篇文章的名字为深入学习Python解析并读取PDF文件内容的方法. 链接如下:https://www.cnblogs.com/wj-1314/p/9429 ...

  5. Nginx实战-后端应用健康检查

    严格来说,nginx是没有针对负载均衡后端节点的健康检查的,但是可以通过proxy_next_upstream来间接实现,但这个还是会把请求转发给故障服务器的,然后再转发给别的服务器,这样就浪费了一次 ...

  6. FFmpeg编解码处理3-视频编码

    本文为作者原创,转载请注明出处:https://www.cnblogs.com/leisure_chn/p/10584937.html FFmpeg编解码处理系列笔记: [0]. FFmpeg时间戳详 ...

  7. 无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)

    比如输入apt-get install eclipse,或者apt-get update 会提示 无法打开锁文件 /var/lib/dpkg/lock - open (13: 权限不够)  无法对状态 ...

  8. Yarn的运行原理(执行流程)

    服务功能 ResouceManager:     1.处理客户端的请求     2.启动和监控ApplicationMaster     3.监控nodemanager     4.资源的分配和调度 ...

  9. [PHP] 数据结构-输出链表倒数第k个结点PHP实现

    输入一个链表,输出该链表中倒数第k个结点.第一个指针走(k-1)步,到达第k个节点,两个指针同时往后移动,当第一个结点到达末尾的时候,第二个结点所在位置就是倒数第k个节点了 <?php clas ...

  10. [android] notification入门

    通知栏,对话框,Toast是我们接触的三个提示框,通知栏是在系统的应用com.adnroid.systemui当中的 接触的几个Manger,getSystemService()方法得到的,参数: A ...