day1--react基础语法

最新推荐文章于 2024-09-13 08:56:45 发布

coder_66l

最新推荐文章于 2024-09-13 08:56:45 发布

阅读量886

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/coder_66l/article/details/124028290

版权

这篇博客详细介绍了React的基础知识，包括React的起源、特点、开发依赖和jsx语法。讲解了React如何通过组件化、虚拟DOM和声明式编程提高开发效率。还涉及到ES6的class关键字和在VSCode中设置用户片段以提升编码效率。

摘要由CSDN通过智能技术生成

一、react简介

1.起源

React是2013年，Facebook开源的JavaScript框架，那么当时为什么Facebook要推出这样一款框架呢？
- 这个源于一个需求，所产生的bug：
- 该功能上线之后，总是出现bug；
- 三个消息的数字在发生变化时，过多的操作很容易产生bug；
bug是否可以修复呢？当然可以修复，但是Facebook的工程师并不满足于此；
- 他们开始思考为什么会产生这样的问题；
- 在传统的开发模式中，我们过多的去操作界面的细节；（前端、iOS、Android）
- 并且需要掌握和使用大量DOM的API，当然我们可以通过jQuery来简化和适配一些API的使用；
- 另外关于数据（状态），往往会分散到各个地方，不方便管理和维护；
他们就去思考，是否有一种新的模式来解决上面的问题：
- 1.以组件的方式去划分一个个功能模块
- 2.组件内以jsx来描述UI的样子，以state来存储组件内的状态
- 3.当应用的状态发生改变时，通过setState来修改状态，状态发生变化时，UI会自动发生更新

2.特点：

1.采用组件化模式，声明式编程，提高开发效率及组件复用率(多平台适配)

命令式编程：每一个操作都是给浏览器或者计算机一步步命令
声明式编程：

2.在react native中可以使用react语法进行移动端开发

3.使用虚拟dom和diff算法进行

3.react开发依赖

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W4qxn2lS-1649341100264)(img/ 在这里插入图片描述
.png)]

4.引入react依赖

方式一：直接CDN引入

方式二：下载后，添加本地依赖

方式三：通过npm管理（后续脚手架再使用）

体验react实现更改内容

<!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>
</head>

<body>
  <div id="app">app</div>
  <!-- 添加react依赖 -->
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <!-- 开始开发 -->
  <!-- 注意事项：使用jsx，并且希望javascript中的·jsx代码得到正确编译，需要给script标签添加type属性 -->
  <script type="text/babel">
    // ReactDOM.render(渲染的内容, 挂载的对象)
    // 渲染内容中应该写jsx代码
    let message = 'hello world'
    function btnClick() {
     
      message = 'hello react'
      console.log(message);
      render()
    }
    // 与vue一样，最外层只能有一个标签
    function