React@17.x---学习笔记--001

zouyunchong

已于 2022-06-15 18:11:21 修改

阅读量151

点赞数 1

分类专栏： react 文章标签： react.js 学习

于 2022-06-15 17:55:00 首次发布

本文链接：https://blog.csdn.net/zouyunchong/article/details/125301295

版权

react 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

React@17.x—学习笔记–xx 是一个系列，可以从001开始阅读，作者会持续更新，希望帮助自己也帮助大家👊。

以下代码均可以运行

前言：
一：react一个将数据渲染为HTML视图的开源javascript库

二：
1）原生的JavaScript：

原生的JavaScript操作DOM繁琐,效率低(DOM-API操作UI)；
使用JavaScript直接操作DOM，浏览器会大量的重排重绘；
原生JavaScript没有组件化编码方案，代码复用率低；

2）React：

采用组件化模式，声明式编码，提高开发效率及组件复用率
在React Native 中可以使用React语法进行移动端开发
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

三：虚拟DOM

在这里插入图片描述
React实现：

第一篇 React入门

1 React 使用的是jsx语法

示例代码一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- react核心库  React-->
     <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
     <!-- 用于操作dom  React-dom-->
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
     <!-- 把jsx转换化为js -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- 用于对组件标签属性进行限制  全局多了一个PropTypes   此处可暂不关注 -->
     <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
 
</head>
<body>
    <div id="root"></div>
    <!-- 解析jsx语法 -->
    <script type="text/babel">
        // 1创建虚拟dom
        var DOM=<h1>react dom</h1>  // 此处是jsx 不是字符串
        // 2渲染到页面
        ReactDOM.render(DOM,document.getElementById("root"))
    </script>
</body>
</html>

2 创建虚拟DOM的方式

2.1 原生js创建虚拟DOM

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- react核心库  React-->
     <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
     <!-- 用于操作dom  React-dom-->
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
     <!-- 用于对组件标签属性进行限制  全局多了一个PropTypes -->
     <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
 
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript">
        // 创建虚拟dom  const VDOM=React.createElement(标签名，标签属性，标签体内容);
        
        //const VDOM=React.createElement("h1",{id:"title"},"hello react");

		//标签内容为标签时，按照以下格式
         const VDOM=React.createElement("h1",{id:"title"},React.createElement('span', {},"hello react"));

        // 2渲染到页面
        ReactDOM.render(VDOM,document.getElementById("root"));
    </script>
</body>
</html>

2.2 jsx创建虚拟DOM

请查看示例代码一

2.3 虚拟DOM与真实DOM比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- react核心库  React-->
     <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
     <!-- 用于操作dom  React-dom-->
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
     <!-- 把jsx转换化为js -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- 用于对组件标签属性进行限制  全局多了一个PropTypes -->
     <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>

</head>
<body>
    <div id="root"></div>
    <!-- babel可以解析jsx语法，解析为js，浏览器使用的是js -->
    <script type="text/babel">
        // 1创建虚拟dom
        var DOM=<h1 id="title">react dom</h1>  // 此处是jsx 不是字符串   浏览器转化为js的书写方式

        // 2渲染到页面
        ReactDOM.render(DOM,document.getElementById("root"));

        console.log(DOM)

        /*
        * 虚拟dom 本质是一个object 对象
        * 虚拟dom比较轻，属性较少，真实dom 重，属性多
        * 虚拟dom最终会转化为真实dom
        */
    </script>
</body>
</html>

3 jsx基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            background: red;
        }
    </style>
     <!-- react核心库  React-->
     <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
     <!-- 用于操作dom  React-dom-->
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
     <!-- 把jsx转换化为js -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- 用于对组件标签属性进行限制  全局多了一个PropTypes -->
     <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
 
</head>
<body>
    <div id="root"></div>

    <!-- 解析jsx语法 -->
    <script type="text/babel">
        const myid="test"

        // 1创建虚拟dom
        var DOM=(
            <h1 id="title">
                <span id={myid.toLocaleLowerCase()} className="title" style={{color:"white",fontSize:"46px"}}>title</span>
            </h1>
        )  // 此处是jsx 不是字符串   浏览器转化为js的书写方式

        // 2渲染到页面
        ReactDOM.render(DOM,document.getElementById("root"))

        /* jsx语法规则
        *1,定义虚拟dom 不要写引号
        *2,标签中引入js表达式 需要 {}
        *3,样式的类名 className
        *4,内敛样式  style={{color:"white",fontSize:"46px"}
        *5,只能有一个根标签
        *6,标签必须闭合
        *7,标签首字母
            如果小写字母开头,转化为同名的html标签,无，则保存
            如果是大写字母开头,react渲染组件，无则报错
        
        */
    </script>
</body>
</html>

4 练习

jsx 中 {title} 是表达式我们书写的是jsx表达式，要分清出表达式和语句的区别.
示例代码二：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title {
            background: red;
        }
    </style>
     <!-- react核心库  React-->
     <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
     <!-- 用于操作dom  React-dom-->
     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
     <!-- 把jsx转换化为js -->
     <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
     <!-- 用于对组件标签属性进行限制  全局多了一个PropTypes -->
     <script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.min.js"></script>
 
</head>
<body>
    <div id="root"></div>
    <!-- 
        【js语句】【js表达式】
        【表达式：一个表达式会产生一个值，可以用到任何需要一个值的地方
            1，a
            2，a+b
            3，demo(1)
            4，arr.map()
            5,function test () {}

        【js语句
            1，if(){}
            2，for(){}
            3，switch(){case:xxx}
        
     -->

    <!-- 解析jsx语法 -->
    <script type="text/babel">
       // 模拟数据
       const data=[
           "react","vue","angluar"
       ]

        // 1创建虚拟dom
        var DOM=(
            <div>
                <h1>框架</h1>
                <ul>
                    {
                        data.map((item,index)=>{
                          return  <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )  

        // 2渲染到页面
        ReactDOM.render(DOM,document.getElementById("root"))

    </script>
</body>
</html>