React——01——初始React

野生小米椒

已于 2023-11-29 18:52:17 修改

阅读量175

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2020-12-29 22:56:39 首次发布

本文链接：https://blog.csdn.net/x1037490413/article/details/111938872

版权

React 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

一：React基本概念

1.React高效的原因：
1.1 虚拟DOM，不总是直接操作DOM
1.2 DOM Diff算法，最小化页面重绘，减少重绘的区域，只重绘改动的区域
2.特点
2.1采用组件化模式，提高复用率，声明式编码
2.2再React Native中可以使用React语法进行移动端开发
2.3使用虚拟DOM(没在页面上，在电脑内存里)+优秀的Diffing算法，尽量减少与真实DOM的交互
在这里插入图片描述

在这里插入图片描述

二：React的基本使用

CDN下载引入文件
在这里插入图片描述搜索React,选择开发版或者生产版
选择一个复制链接打开

右键另存为一个页面
在这里插入图片描述
就可以得到这样的文件

引入到项目就可以使用了
其中babel用来ES6转ES5，解析JSX语法代码转为纯JS语法代码的库（JSX是js的扩展语法）

react.development.js React的核心库
react-dom.development.js提供操作DOM的react扩展库
引用顺序要注意，核心库要放在最前面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
    //  创建虚拟DOM元素对象
    var vDom=<h1>hello React!</h1>//不是字符串  这就是JSX语法
    //  将虚拟DOM渲染到页面真实DOM容器中
      ReactDOM.render(vDom,document.getElementById('test'))
    </script>
 
  </body>
</html>

1.虚拟DOM

1.本质是Object类型的对象（一般对象）

1.1虚拟DOM和真实DOM差别

在这里插入图片描述

1.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性
2.虚拟DOM最终会被React转化为真实DOM，呈现在页面上

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <div id="test"></div>
    <div id="demo"></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>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
    //  创建虚拟DOM元素对象
    var vDom=<h1>hello React!</h1>//不是字符串  这就是JSX语法
    // 真实DOM
    const TDOM=document.getElementById('demo')
    //  将虚拟DOM渲染到页面真实DOM容器中
      ReactDOM.render(vDom,document.getElementById('test'))
      console.log('虚拟DOM',vDom)
      console.log('真实DOM',TDOM)
      //打断点，查看真实DOM和虚拟DOM区别
      debugger
      console.log(typeof vDom)
      console.log(vDom instanceof Object)
    </script>
 
  </body>
</html>

2.JSX用法

1.定义虚拟DOM时，不要写引号
2.标签中混入js表达式时要用{}，表达式和js语句不同，一定注意区分
**1.表达式：一个表达式会产生一个值(undefined也算)，可以放在任何一个需要值的地方,定义一个变量接能接到的表达式是表达式，例如const x=某表达式，哪怕是undefined也是表达式
下面这些都是表达式：
（1) a
(2) a+b
(3) demo(1)
（4)arr.map()
（5)function test(){}
2.语句（代码）
下面这些都是语句（代码）
（1) if(){}
(2)for(){}
(3)switch(){case:xxx}
**

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="test"></div>
    <script
      type="text/javascript"
      src="../react shangguigu//js/react.development.js"
    ></script>
    <script
      type="text/javascript"
      src="../react shangguigu/js/react-dom.development.js"
    ></script>
    <script
      type="text/javascript"
      src="../react shangguigu//js/babel.min.js"
    ></script>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      //  创建虚拟DOM元素对象
      const data = ["a", "b", "c"];
      // const arr = [{ a: 1, b: 2, c: 3 }];
      const vDOM = (
        <div>
          <h1>第一课</h1>
          <ul>
            {data.map((item, index) => {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      );
      //  将虚拟DOM渲到页面真实DOM容器中
      ReactDOM.render(vDOM, document.getElementById("test"));
    </script>
  </body>
</html>

3.样式的类名指定不要用class,要用className
4内敛间样式用{{key:value}}的形式写，-要写成驼峰式
为什么两个括号了，因为一个括号是js，要在js里写很多东西用对象形式，所以就是两个括号
比如color:“white”，white有引号是因为它不是变量
5.jsx只能有一个根标签，如果要写多个标签，可以用一个div根标签包起来就行了
6.标签必须闭合，假如是input 在这里插入图片描述
没有内容，不想写就可以写成自结束

7.标签首字母
1.若小写字母开头，则将改标签转为html同名元素，若html中无该标签对应的同名元素，则报错
2.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .title{
        background-color: aqua;
        width: 200px;
      }
    </style>

  </head>
  <body>
    <div id="test"></div>
    <div id="demo"></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>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
       const myId='AbCDDD'
       const myData='Hello,rEact'
       //创建虚拟DOM
       const VDOM=(
         <h2 className="title" id={myId.toLowerCase()}>
           <span style={{color:"white",fontSize:'29px'}}>{myData.toLowerCase()}</span>
           <input type="text"/>
         </h2>
       )
       ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
 
  </body>
</html>

React能遍历数组，对象展示不出来会报错：
在这里插入图片描述

8.注意点

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</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>
    <!--此处一定要写 type="text/babel" 告诉bable.js解析里面的jsx代码 -->
    <script type="text/babel">
      //  模拟一些数据  给数组进行遍历才行，对象不行
      const data=['Angular','React',"Vue"]
       //创建虚拟DOM
       const VDOM=(
        <div>
         <h1>前端框架</h1>  
          <ul>
            {
              //这里写js语句会报错，只有js表达式才行
              data.map((item,index)=>{
                return <li key={index}>{item}</li>
              })
            }
          </ul>
        </div>
        
       )
       ReactDOM.render(VDOM,document.getElementById('test'))
       
    </script>
 
  </body>
</html>