React学习笔记

最新推荐文章于 2022-10-18 17:18:56 发布

意纯

最新推荐文章于 2022-10-18 17:18:56 发布

阅读量125

点赞数 1

分类专栏：学习笔记文章标签： react

本文链接：https://blog.csdn.net/qq_41065415/article/details/119762864

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、React入门

1.1 React简介

1.1.1 介绍描述

用于动态构建用户界面的 JavaScript 库(只关注于视图)
由Facebook开源

1.1.2 React的特点

声明式编码
组件化编码
React Native编写原生应用
高效（优秀的Diffing算法）

1.1.3 React高效的原因

使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM
DOM Diffing算法, 最小化页面重绘

1.2 React的基本使用

1.2.1 相关JS库

react.js：React核心库
react-dom.js：提供操作DOM的react扩展库
babel.min.js：解析JSX语法代码转为JS代码的库

1.2.2 创建虚拟DOM的两种方式

纯JS方式(一般不用)
JSX方式

1.2.3 虚拟DOM与真实DOM

React提供了一些API来创建一种 “特别” 的一般js对象
```
const VDOM = React.createElement('xx',{id:'xx'},'xx')
```
上面创建的就是一个简单的虚拟DOM对象
虚拟DOM对象最终都会被React转换为真实的DOM
编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界面。

1.3 React JSX

1.3.1 JSX

全称: JavaScript XML
react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
作用: 用来简化创建虚拟DOM
1. 写法：
```
var ele = <h1>Hello JSX!</h1>
```
2. 注意1：它不是字符串, 也不是HTML/XML标签
3. 注意2：它最终产生的就是一个JS对象
标签名任意: HTML标签或其它标签
标签属性任意: HTML标签属性或其它
基本语法规则
1. 遇到"<"开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2. 遇到以" { "开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
babel.js的作用
1. 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2. 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理

1.3.2 渲染虚拟DOM(元素)

语法:
```
ReactDOM.render(virtualDOM, containerDOM)
```
JSX语法规则：

1.定义虚拟DOM时，不要写引号。

2.标签中混入JS表达式时要用{}。

3.样式的类名指定不要用class，要用className。

4.内联样式，要用style={{key:value}}的形式去写。

5.只有一个根标签

6.标签必须闭合

7.标签首字母

(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
参数说明
1. 参数一: 纯js或jsx创建的虚拟dom对象
2. 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

例子：

<script type="text/babel" > /* 此处一定要写babel */
  //1.创建虚拟DOM
  const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    <h1 id="title">
      <span>Hello,React</span>
    </h1>
  )
  // 等同于下面：
  /*const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))*/
  //2.渲染虚拟DOM到页面

  ReactDOM.render(VDOM,document.getElementById('test'))
</script>

1.4 模块与组件、模块化与组件化的理解

1.4.1 模块

理解：向外提供特定功能的js程序, 一般就是一个js文件
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂
作用：复用js, 简化js的编写, 提高js运行效率

1.4.2 组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
为什么要用组件：一个界面的功能更复杂
作用：复用编码, 简化项目编码, 提高运行效率

1.4.3 模块化

当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

1.4.4 组件化

当应用是以多组件的方式实现, 这个应用就是一个组件化的应用

二、React面向组件编程

2.1 基本理解和使用

2.1.1 注意

组件名必须首字母大写
虚拟DOM元素只能有一个根元素
虚拟DOM元素必须有结束标签

2.1.2 渲染类组件标签的基本流程

React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部

2.2 组件三大核心属性1: state

2.2.1 理解

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)

2.2.2 强烈注意

组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
1. 强制绑定this: 通过函数对象的bind()
2. 箭头函数
状态数据，不能直接修改或更新

2.3 组件三大核心属性2: props

2.3.1 理解

每个组件对象都会有props(properties的简写)属性
组件标签的所有属性都保存在props中

2.3.2 作用

通过标签属性从组件外向组件内传递变化的数据
注意: 组件内部不要修改props数据

2.3.3 编码操作

内部读取某个属性值：this.props.name

对props中的属性值进行类型限制和必要性限制

第一种方式（React v15.5 开始已弃用）：

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）

Person.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number. 
}

扩展属性: 将对象的所有属性通过props传递
```
<Person {...person}/>
```

默认属性值：

Person.defaultProps = {
  age: 18,
  sex:'男'
}

组件类的构造函数

constructor(props){
  super(props)
  console.log(props)//打印所有属性
}

2.4 组件三大核心属性3: refs与事件处理

2.4.1 理解

组件内的标签可以定义ref属性来标识自己

2.4.2 编码

字符串形式的ref
```
<input ref="input1"/>
```
回调形式的ref
```
<input ref={c => this.input1 = c} />
```

createRef创建ref容器

myRef = React.createRef() 
<input ref={this.myRef}/>

2.4.3 事件处理

通过onXxx属性指定事件处理函数(注意大小写)
1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
通过event.target得到发生事件的DOM元素对象

2.5 收集表单数据

2.5.1 理解

包含表单的组件分类

受控组件
非受控组件

2.6 组件的生命周期

2.6.1 理解

组件从创建到消亡它会经历一些特定的阶段
React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作

2.6.2 生命周期流程图(旧)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vgDZDpyB-1629194882525)(C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\image-20210407172905507.png)]

生命周期的三个阶段（旧）

初始化阶段：由ReactDOM.render()触发—初次渲染
constructor()
componentWillMount()
render()
componentDidMount()
更新阶段：由组件内部this.setSate()或父组件重新render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render()
4. componentDidUpdate()
卸载组件：由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()

2.6.3 生命周期流程图(新)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8x8hBDgV-1629194882528)(C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\image-20210407173654075.png)]

生命周期的三个阶段（新）

初始化阶段：由ReactDOM.render()触发—初次渲染
1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()
更新阶段：由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
卸载组件：由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()

2.6.4 重要的勾子

render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器

2.6.5 即将废弃的勾子

componentWillMount()
componentWillReceiveProps()
componentWillUpdate

现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

2.7 虚拟DOM与DOM Diffing算法

2.7.1 基本原理图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DiomuxWr-1629194882531)(C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\image-20210408174310117.png)]

经典面试题:
1). react/vue中的key有什么作用？（key的内部原理是什么？）
2). 为什么遍历列表时，key最好不要用index?

虚拟DOM中key的作用：
1. 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
2. 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
  1. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
    1. 若虚拟DOM中内容没变, 直接使用之前的真实DOM
    2. 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
  2. 旧虚拟DOM中未找到与新虚拟DOM相同的key，根据数据创建新的真实DOM，随后渲染到到页面
3. 用index作为key可能会引发的问题：
  1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
  会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
  2. 如果结构中还包含输入类的DOM：
```
   		会产生错误DOM更新 ==> 界面有问题。
					3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
   		仅用于渲染列表用于展示，使用index作为key是没有问题的。
   			4. 开发中如何选择key?:
   					1. 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
   					2. 如果确定只是简单的展示数据，用index也是可以的。
```

三、React应用（基于React脚手架）

3.1 使用create-react-app创建react应用

3.1.1 创建项目并启动

全局安装：npm i -g create-react-app
切换到想创项目的目录，使用命令：create-react-app hello-react
进入项目文件夹：cd hello-react
启动项目：npm start

3.1.2 react脚手架项目结构

public ---- 静态资源文件夹
	favicon.icon ------ 网站页签图标
	index.html -------- 主页面
	logo192.png ------- logo图
	logo512.png ------- logo图
	manifest.json ----- 应用加壳的配置文件
	robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
	App.css -------- App组件的样式
	App.js --------- App组件
	App.test.js ---- 用于给App做测试
	index.css ------ 样式
	index.js ------- 入口文件
	logo.svg ------- logo图
	reportWebVitals.js--- 页面性能分析文件(需要web-vitals库的支持)
	setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)

3.1.3 功能界面的组件化编码流程（通用）

拆分组件: 拆分界面,抽取组件
实现静态组件: 使用组件实现静态页面效果
实现动态组件
1. 动态显示初始化数据
  1. 数据类型
  2. 数据名称
  3. 保存在哪个组件
2. 交互(从绑定事件监听开始)

意纯

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React学习笔记

一、React入门1.1 React简介1.1.1 介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源1.1.2 React的特点声明式编码组件化编码React Native编写原生应用高效（优秀的Diffing算法）1.1.3 React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOMDOM Diffing算法, 最小化页面重绘1.2 React的基本使用1.2.1 相关JS库react.js
复制链接

扫一扫