react入门级详细笔记

目录

  • 一、React的基本认识
    • 1、介绍
    • 2、 React的特点
    • 3、React高效的原因
  • 二、React的基本使用
    • 1、相关js库
    • 2、在页面中导入js库
    • 3、编码
  • 三、React JSX
    • 1、虚拟DOM
    • 2、JSX
    • 3、渲染虚拟DOM元素
  • 4、创建虚拟DOM的方式
    • 纯JS方式
  • 5、React 之 Hello World

    一、React的基本认识
    1、介绍
    react是用于构建用户界面的JavaScript库(只关注view)由Facebook开源

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

    3、React高效的原因
    • 虚拟(virtual)DOM, 不总是直接操作DOM
    • DOM Diff算法, 最小化页面重绘

    二、React的基本使用
    1、相关js库
    • `react.js`: React的核心库
    • `react-dom.js`: 提供操作DOM的react扩展库
    • `babel.min.js`: 解析JSX语法代码转为纯JS语法代码的库

    2、在页面中导入js库


    3、编码


    三、React JSX
    1、虚拟DOM
    React提供了一些API来创建一种特别的一般js对象
    var element = React.createElement('h1', {id:'myTitle'},'hello')

    上面创建的就是一个简单的虚拟DOM对象
    虚拟DOM对象最终都会被React转换为真实的DOM
    ? 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面

    2、JSX
    • 全称: `JavaScript XML`
    • react定义的一种类似于XML的JS扩展语法:`XML+JS`
    • 作用: 用来创建react虚拟DOM(元素)对象
    var ele = Hello JSX!
    注意1: 它不是字符串, 也不是HTML/XML标签
    注意2: 它最终产生的就是一个JS对象
    • 标签名任意: HTML标签或其它标签
    • 标签属性任意: HTML标签属性或其它
    • 基本语法规则
    遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
    遇到以 { 开头的代码,以JS语法解析: 标签中的js代码必须用{ }包含
    • `babel.js`的作用
    浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理

    3、渲染虚拟DOM元素
    语法:
    ReactDOM.render(virtualDOM, containerDOM)

    • 参数一: 纯js或jsx创建的虚拟dom对象
    • 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
    作用:
    将虚拟DOM元素渲染到页面中的真实容器DOM中显示

    4、创建虚拟DOM的方式
    纯JS方式
    React.createElement('h1',{id:'myTitle'}, title

    JSX方式
    {title}

    代码示例
    const test1 = 'MY TEST 1'// 1、创建虚拟dom:两种方法var element = React.createElement('h3',{id:app},test1)var element2 = {test1}
    // 2、渲染虚拟domReactDOM.render(element,document.getElementById('app'))ReactDOM.render(element2,document.getElementById('app'))


    5、React 之 Hello World 第一步:引入react.js相关库


    第二步:定义根元素

    【react入门级详细笔记】第三步:在babel环境下写React代码

      推荐阅读