美文网首页
React 第一章 ——入门

React 第一章 ——入门

作者: 定格r | 来源:发表于2019-07-23 10:42 被阅读0次

    1、React 的基本认识

    1.1 react 介绍

    • 用于构建用户界面的 JavaScript 库
    • 由Facebook开源

    1.2 react 高效的原因

    • 虚拟的 DOM ,不总是直接操作 DOM
    • DOM Diff 算法,最小化页面重绘

    2、React 的基本使用

    2.1 相关的 js 库

    1. react.js :React的核心库
    2. react-dom.js:提供操作 DOM 的react 扩展库
    3. babel.min.js:解析JSX 语法代码转为纯 JS 语法代码的库
    <script type="text/javascript" src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"</script>
    <script type="text/javascript" src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    

    2.2 编码

    <script type="text/babel">
        //1.创建虚拟DOM
         const vDom2=<h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
        //2.渲染虚拟DOM
          ReactDOM.render(vDom2,document.getElementById('test2'))
    </script>
    

    3.react 效果

    3.1.React JSX

    1.React 提供了一些 API 来创建一种 特别 的一般 js 对象
    2.虚拟 DOM 对象最终都会被 react 转换为真实的 DOM
    3.我们编码时基本只需要操作react 的虚拟DOM 相关数据,react 会转换为真实DOM 变化而更新界面

    3.2.JSX

    1> 全称:JavaScript XML
    2> react 定义的一种类似于 XML 的 JS 扩展语法:XML+JS
    3>作用:用来创建 react 虚拟 DOM 对象

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

    4> babel.js的作用
    a. 浏览器不能直接解析 JSX 代码, 需要 babel 转译为纯 JS 的代码才能运行
    b. 只要用了JSX,都要加上type="text/babel", 声明需要babel来处理

    3.3 渲染虚拟 DOM

    1. 语法: ReactDOM.render(virtualDOM, containerDOM)
    2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
    3. 参数说明
      a. 参数一: 纯js或jsx创建的虚拟dom对象
      b. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

    例如:

      ReactDOM.render(vDom2,document.getElementById('test2'))
    

    3.4 建虚拟 DOM 的两种方式

    1. 纯JS(一般不用)
    React.createElement('h1',  {id:'myTitle'},  title)
    
    1. JSX:
    <h1 id='myTitle'>{title}</h1>
    

    3.5 . 模块与组件和模块化与组件化的理解

    • 模块:向外提供特定功能的 js 程序, 一般就是一个 js 文件
    • 组件:用来实现特定功能效果的代码集合(html/css/js)
    • 模块化:当应用的 js 都以模块来编写的,这个应用就是模块化的应用
    • 组件化:当应用是以多组件的方式实现,这个应用就是一个组件化的应用
    image.png

    相关文章

      网友评论

          本文标题:React 第一章 ——入门

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