React全家桶

最新推荐文章于 2024-01-12 16:38:27 发布

仲夏夜的开场

最新推荐文章于 2024-01-12 16:38:27 发布

阅读量1.1k

点赞数

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

本文链接：https://blog.csdn.net/qq_33390700/article/details/123770720

版权

前端同时被 2 个专栏收录

39 篇文章 4 订阅

订阅专栏

react

1 篇文章 0 订阅

订阅专栏

视频链接：https://www.bilibili.com/video/BV1wy4y1D7JT?from=search&seid=8911495119258965968&spm_id_from=333.337.0.0
在这里插入图片描述

react简介

1. 是什么？

是一个将数据渲染为HTML视图的开源JavaScript库。
在这里插入图片描述

react只关注页面（视图）

2. 谁开发的？

在这里插入图片描述

3. 为什么要学？

1.原生JavaScript操作DOM繁琐、效率低（DOM-API操作Ul )。
在这里插入图片描述
2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。
3.原生JavaScript没有组件化编码方案，代码复用率低。

使用jQuery，也只是代码量变少，效率仍然低，因为每一次操作dom，都会引起浏览器的重汇重排。

4.React的特点

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。
（命令式编码：通过JS或jQuery拿到页面上红色的盒子，.style改样式把他变成蓝色）
2.在React Native中可以使用React语法进行移动端开发。
3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。（虚拟DOM，专门给react使用的dom，放在内存里）
在这里插入图片描述
纯js实现

原来的数据无法复用。

优势：后期数据发生变化的时候，不丢弃虚拟DOM，进行虚拟DOM的比较，比较一致的话，页面的真实DOM直接使用，只生成新的DOM。

5.学习React之前你要掌握的JavaScript基础知识

判断this的指向
class(类)
ES6语法规范
npm包管理器
原型、原型链
数组常用方法（数组统计、遍历、过滤、条件筛选、条件求和、筛选最值）
模块化
在这里插入图片描述
babel.min.js的作用

react.development.js 核心库
react-dom.development.js react扩展库（帮忙操作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>hello_react</title>
</head>
<body>
  <!-- 准备好一个容器 -->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 引入react-dom，用于支持react操作dom -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <!-- babel代表里面写的不是js，而是jsx，靠babel翻译 -->
  <script type="text/babel">
    // 1 创建虚拟dom
    const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
    // 2 渲染虚拟dom到页面
    // ReactDOM.render(虚拟dom，容器)
    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>