react入门篇中文文档https://react.docschina.org/ 1.react介绍 1.1介绍描述

从今天起，我要开始学习React了，本篇说一些React基本概念，算是入门概述，根据B站尚硅谷React教学视频形成的笔记

中文文档https://react.docschina.org/

1.react介绍

1.1介绍描述

用于动态构建用户界面的javaScript库

1.2javaScript的缺点

原生js操作dom繁琐、复杂
原生js操作dom,浏览器会大量的重排重绘
原生js没有组件化编码方案，代码复用率低

1.3react的特点

采用组件化模式，声明式编码，提高代码复用率
学习react Native可以使用react开发移动端
使用了diff算法+虚拟dom，减少浏览器与真实dom的交互

1.4学习react需要掌握js基础

判断this指向、class类的定义、es6语法规范、npm包管理、原型，原型链、数组方法、模块化等知识

1.5react高效的原因

使用虚拟dom，不总直接操作页面真实dom
使用diff算法，减少浏览器的重排与重绘

2. react实现holle react

2.1react相关库介绍

react.development.js： react核心库，生成一个React对象
react-dom.development.js：扩展库，支持react操作dom，生成一个ReactDOM对象
babel.min.js：主要：解析jsx转化成js， ea6转化成es5

2.2 实现效果：虚拟dom实现下图结构

2.2.1【代码实现】

<body>
  <div id="text"></div>
  
  <!-- react核心库，会生成react对象 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- react扩展库，支持react操作dom,会生成reactDom对象 -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- //jsx语法翻译成js语法 -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <script type="text/babel">
    // 1.创建虚拟dom元素
    const vDom = <h1>holle react</h1>
    // 2.将虚拟dom元素渲染到页面上
    // ReactDom.render(虚拟dom,盒子
    ReactDOM.render(vDom, document.getElementById('text'))
  </script>

</body>

2.2.2【注意问题总结】

react核心库和react扩展库引入顺序:react.development.js一定要在react-dom.development.js前面引入
书写虚拟dom外层的script 的type是"text/babel",而不是"text/javascript"
虚拟dom定义不需要引号

3. 虚拟Dom的俩种写法

3.1 案例:使用【jsx】实现标签多级结构和标签带属性

3.1.1【代码实现】

<body>
  <!-- 案例实现1:h1标签上边带属性 -->
  <!-- 案例实现2:实现多级标签嵌套 -->
  <div id="text"></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">
    // 案例1:
    // const vDOM = <h1 id='title'>hello react</h1>
    // ReactDOM.render(vDOM, document.getElementById('text'))
    // 案例2:
    // const vDOM = <h1 id='title'><span>hello react</span></h1>
    // 层级结构分明的写法：使用小括号包裹起来
    const vDOM = (
      <h1 id='title'>
        <span>hello react</span>
      </h1>
    )

    ReactDOM.render(vDOM, document.getElementById('text'))
  </script>
</body>
</html>

【注意点：】

虚拟dom中换行需要用（）包裹换行结构

3.2 案例:使用【js】实现标签多级结构和标签带属性（一般不用）

3.2.1【代码实现】

<body>
  <!-- 案例实现1:h1标签上边带属性 -->
  <!-- 案例实现2:实现多级标签嵌套 -->
   <div id="text"></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">
    // 案例1:
    // // 1.创建虚拟dom元素
    // // React.createElement(标签,属性,内容)--创建一个虚拟dom
    // // Document.createElement(标签)---创建一个真实dom
    // const vDom = React.createElement('h1',{id:'title'},'hello react')
    // // 2.将虚拟dom元素渲染到页面上
    // // ReactDom.render(虚拟dom,盒子
    // ReactDOM.render(vDom, document.getElementById('text'))
    // 案例2:
    const vDom = React.createElement('h1',{id:'title'},React.createElement('span',null, 'hello react'))
    ReactDOM.render(vDom, document.getElementById('text'))
   </script>

</body>

【对比发现】：jsx实现多级结构要比js简化许多

3.3真实dom和虚拟dom区别

真实dom和虚拟dom本质都是一个对象
真实dom比较重(属性较多)，虚拟dom比较轻(属性少)，因为虚拟dom是react内部在用，无需真实dom上那么多的属性
虚拟dom最终会被转化成真实dom，呈现在页面上

<body>
  <div id="text"></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 vDOM = (
      <h1 id='title'>
        <span>hello react</span>
      </h1>
    )
    ReactDOM.render(vDOM, document.getElementById('text'))
    console.log('虚拟dom:', vDOM) // 虚拟dom是一个对象
    console.log('真实dom:', document.getElementById('text')) // 真实dom是真实的DOM元素
    debugger;
  </script>
</body>