---
title: react
date: 2021-01-20 11:13:20
---
> 以下是观看尚硅谷React课程所做的笔记。
>
> [尚硅谷React](https://www.bilibili.com/video/BV1wy4y1D7JT?p=43&t=5)
# React简介
**react是什么？**
React用于构建用户界面的JS库。是一个将数据渲染为HTML视图的开源JS库。
**为什么学？**
1.原生JS操作DOM繁琐，效率低
2.使用JS直接操作DOM,浏览器会进行大量的重绘重排
3.原生JS没有组件化编码方案，代码复用低
> 在学习之前最好看一下关于npm的知识：下面是我在网上看见的一个写的还不错的npm的文章
>
> [npm](https://blog.csdn.net/qq_25502269/article/details/79346545)
# React入门
## React 基础案例
1.先倒入三个包：
【先引入react.development.js，后引入react-dom.development.js】
``` cmd
react.development.js
react-dom.development.js
babel.min.js
```
2.创建一个容器
3.创建虚拟DOM，渲染到容器中
``` html
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../js/react.development.js" type="text/javascript"></script>
<script src="../js/react-dom.development.js" type="text/javascript"></script>
<script src="../js/babel.min.js" type="text/javascript"></script>
<!--这里使用了babel用来解析jsx语法-->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1>Hello</h1> //这个地方使用的是JSX语法，不需要加""
// 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
ReactDOM.render(VDOM,document.getElementById("test"));
</script>
</html>
```
这样，就会在页面中的这个div容器上添加这个h1.
## JSX基础语法
1.定义虚拟DOM，不能使用“”
2.标签中混入JS表达式的时候使用{}
3.样式的类名指定不要使用class，使用className
4.内敛样式要使用双大括号包裹
5.不能有多个根标签，只能有一个跟标签
6.标签必须闭合
7.如果小写字母开头，就将标签转化为html同名元素，如果html中无该标签对应的元素，就报错；如果是大写字母开头，react就去渲染对应的组件，如果没有就报错
> 关于JS表达式和JS语句：
>
> JS表达式：返回一个值，可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text(){}
> JS语句：if(){} for(){} while(){} swith(){} 不会返回一个值
实例如下：
```html
<!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>
.sss{
color: red;
}
</style>
</head>
<body>
<!-- 准备好容器 -->
<div id="test">
</div>
</body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../js/react.development.js" type="text/javascript"></script>
<script src="../js/react-dom.development.js" type="text/javascript"></script>
<script src="../js/babel.min.js"></script>
<!--这里使用了js来创建虚拟DOM-->
<script type="text/babel">
const MyId = "title";
const MyData = "Cyk";
// 1.创建虚拟DOM
const VDOM = (
<h1 id = {MyId.toLocaleUpperCase()}>
<span className = "sss" style = {{fontSize:'50px'}}>sss</span>
</h1>
)
// 2.渲染，如果有多个渲染同一个容器，后面的会将前面的覆盖掉
ReactDOM.render(VDOM,document.getElementById("test"));
</script>
</html>
```
## 两种创建虚拟DOM的方式
**1.使用JSX创建虚拟DOM**
```jsx
const VDOM = (
<h1 id = {MyId.toLocaleUpperCase()}>
<span className = "sss" style = {{fontSize:'50px'}}>sss</span>
</h1>
)
```
这个在上面的案例中已经演示过了 ，下面看看另外一种创建虚拟DOM的方式
**2.使用JS创建虚拟DOM**
```js
// 1.创建虚拟DOM[在这使用了js的语法]React.createElement(标签,标签属性,内容)
const VDOM = React.createElement('h1',{id:"title"},"nihao")
```
使用JS和JSX都可以创建虚拟DOM，但是可以看出JS创建虚拟DOM比较繁琐，尤其是标签如果很多的情况下，所以还是比较推荐使用JSX来创建。
# 组件
当应用是以多组件的方式实现，这个应用就是一个组件化的应用
> **注意：** 组件名称必须以大写字母开头。
>
> React 会将以小写字母开头的组件视为原生 DOM 标签。例如，< div />` 代表 HTML 的 div 标签，而 `< Weclome /> 则代表一个组件，并且需在作用域内使用 `Welcome`
>
> 传递的参数，不能在组件中改动
## 函数式组件
```react
//1.先创建函数，函数可以有参数，也可以没有，但是必须要有返回值 返回一个虚拟DOM
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
//2.进行渲染
ReactDOM.Render(<Welcom name = "ss" />,document.getElementById("div"));
```
让我们来回顾一下这个例子中发生了什么：
1. 我们调用 `ReactDOM.render()` 函数，并传入 ` <Welcome name="Sara" /> ` 作为参数。
2. React 调用 `Welcome` 组件，并将 `{name: 'Sara'}` 作为 props 传入。
3. `Welcome` 组件将 `Hello, Sara` 元素作为返回值。
4. React DOM 将 DOM 高效地更新为 `Hello, Sara`。
## Class组件
```react
//必须继承React.Component
//然后重写Render()方法，该方法一定要有返回值，返回一个虚拟DOM
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
//渲染 【这个跟之前也是一样的】
ReactDOM.Render(<Welcom name = "ss" />,document.getElementById("div"));
```
执行过程：
1.React解析组件标签，找到相应的组件
2.发现组件是类定义的，随后new出来的类的实例，并通过该实例调用到原型上的render方法
3.将render返回的虚拟DOM转化为真实的DOM,随后呈现在页面中
## 组件案例
下面，我们通过一个案例更好的理解组件：【只关注与核心代码】
我们发现组件是可以包含中使用的， 而且如果创建的数组，必须要代一个key。数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值
```react
<script type="text/babel">
//创建一个组件<li>
function GetLi(props){
return <li>{props.value}</li>
};
// 1.创建类式组件<ul>
class MyComponent extends React.Component{
render(){
console.log(this.props.arr);
let com = this.props.arr.map((item,index)=>
//在这个地方包含了GetLi这个组件，【注意不能用{}】
//因为这个是一个列表，所以必须传递一个key【独一无二的Key】
//key 帮助 React 识别哪些元素改变了，比如被添加或删除。
<GetLi value={item} key = {index} />
);
console.log(com);
return <ul>{com}</ul>
}
}
let num = [1,2,3,4]
//2.渲染组件
ReactDOM.render(<MyComponent arr={num}/>,document.getElementById("test");
</script>
```
# 组件实例的三大属性
## state
我们都说React是一个状态机，体现是什么地方呢，就是体现在state上�
【react基础2】别人的笔记 （215个子文件） 
config 295B bootstrap.css 151KB bootstrap.css 151KB bootstrap.css 151KB bootstrap.css 151KB App.css 812B App.css 602B item.css 521B list.css 466B list.css 466B list.css 466B list.css 466B footer.css 440B index.css 379B header.css 367B list.css 295B hello.module.css 38B welcom.css 36B App.css 0B header.css 0B App.css 0B header.css 0B App.css 0B App.css 0B App.css 0B App.css 0B App.css 0B App.css 0B header.css 0B App.css 0B header.css 0B App.css 0B description 73B .eslintcache 3KB exclude 240B
RouterSetDef.gif 98KB RouterDef.gif 56KB addObject.gif 24KB BeforeGender.gif 7KB .gitignore 333B HEAD 189B HEAD 189B HEAD 30B HEAD 21B
表单组件.html 4KB promise.html 3KB 高版本的新生命周期.html 3KB 生命周期.html 3KB state.html 2KB 事件处理.html 2KB index.html 2KB 高级函数.html 2KB 生命周期初体验.html 2KB jsx.html 2KB 回调形式.html 2KB props限制 简化.html 2KB state更新.html 2KB props限制.html 2KB getSnapshotBeforeUpdate.html 2KB API.html 2KB 函数式组件.html 2KB 受控组件.html 2KB 01-验证Diffing算法.html 2KB 类式组件.html 2KB props.html 2KB 非受控组件.html 1KB props限制 简化 函数.html 1KB 组件套用.html 1KB state简化.html 1KB jsxtext.html 1KB 字符串形式.html 1KB state状态提升.html 1KB 虚拟DOM的两个方式.html 1KB 我是你爹.html 1KB htllo.html 934B index.html 440B index.html 295B index.html 295B index.html 295B index.html 295B index.html 238B index.html 238B favicon.ico 4KB pack-5144cedc9d182cd2020e41d9b7d448202fb5e259.idx 8KB index 25KB react-dom.development17.0.js 944KB react-dom.development.js 792KB babel.min.js 773KB babel.min.js 508KB react.development17.0.js 112KB react.development.js 103KB prop-types.js 48KB prop-types.js 48KB App.js 553B setupProxy.js 412B index.js 384B reportWebVitals.js 375B index.js 294B index.js 294B index.js 294B共 215 条
- 1
- 2
- 3
资源评论
cyj0213
- 粉丝: 117
最新资源
- 《解锁IntelliJ IDEA：打造高效开发利器》，详细介绍 IntelliJ IDEA 的多种高效开发配置技巧
- 接地气的大模型工程，争取成为一本大模型实战百科全书
- [email protected]【vscode有关java开发者必备工具包插件，可以做类定义跳转等功能】
- 【城市道路维护】基于java的道路坑洞上报与修复协同平台设计与实现的详细项目实例（含完整的程序，数据库和GUI设计，代码详解）
- LG HIFI 精灵的外壳，提供 3D 打印模型给大家取用
- LG HIFI 精灵外壳 3D 打印模型供大家取用
- 地级市-人口流动率（2000-2024年）.zip
- LG HIFI 精灵的外壳，提供 3D 打印模型给大家取用
- 精选企业集团流程优化流程数字化转型咨询规划方案PPT(7份）.zip
- 交通垂直领域微调大模型
- 针对交通垂直领域的大模型微调工作
- 工具变量-上市公司企业韧性数据-含代码及原始数据（2012-2024年）.txt
- AWS DevOps Simplified: 实战与最佳实践
- C# NPOI Excel 数据分析工具源码
- Trae CN-Setup-x64-2.0.13.exe
- 智能垃圾桶设计方案记代码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
