2021-11-09

React

1.React概述

特点：

• 轻量：源码包含注释仅3000多行

• 原生：代码用原生js写的，不依赖其他库

• 易扩展：封装程度低，没有过多使用魔法

• 不依赖宿主环境

• 渐进式：react并非框架，对工程没有强大约束力

• 单向数据流：所有的数据自顶而下的流动

• 组件化

• 用js代码申明界面

2.JSX核心

• jsx是js的扩展语法

• 本质是一个js对象，会被babel编译，最终会被转换为React.createElement

• 每个jsx有且仅有一个根节点

• React.Fragment

• 每个jsx元素必须结束

在jsx中嵌入表达式

• 在jsx中使用注释

• 将表达式作为内容的一部分

  • null,undefined,false不会显示
  • 普通对象，不可以作为子元素
  • 可以放置React元素对象

• 将表达式作为元素的属性

• 属性使用小驼峰命名法

• 防止注入攻击

  • 自动编码
  • dangerouslySetInnerHTML

元素的不可变性

• 虽然jsx元素是一个对象，但对象的元素的所有属性不可以更改
• 如果确实需要修改属性，重新创建jsx对象

组件和组件属性

包含内容样式行为的UI单元

组件名称首字母必须大写

创建一个组件

• 函数组件

  • 返回一个React元素

• 类组件

  • 必须继承React.Component
  • 必须提供render函数用于渲染

组件的属性

1.对于函数组件，属性作为一个对象的属性，传递给函数的参数

2.对于类组件，属性作为一个对象的属性，传递给构造函数的参数

组件的属性使用小驼峰

数据属于谁，谁才有权力改动

数据自顶而下流动

组件状态

组件状态：组件可以自行维护的数据

组件状态仅在类组件有效

状态（state)，本质上是一个属性，对象

状态初始化

状态的变化

不能直接改变状态：因为React无法监控到状态发生了变化

必须使用this.setState({})改变状态

一旦调用了this.setState,会导致当前组件重新刷新

组件中的数据

1.props:该数据是由组件的使用者传递数据，所有权不属于组件自身，因此组件无法改变数组

2.state:该数据是组件自身创建，所有权属于组件自身，因此组件有权改变数据

事件

在React中，组件的事件，本质上是一个属性

小驼峰命名

如果没有特殊处理，在事件处理函数中this指向undefined

深入认识setState

setState，它对状态的改变，可能是异步的

• 如果改变状态的代码处于某个HTML元素的事件中，则其是异步的，否则是同步的。
• 如果遇到某个事件中，需要同步调用多次，需要使用函数的方式得到最新的状态
• 最佳实践
  • 把所有的setState当作是异步的
  • 永远不要信任setState调用之后的状态
  • 如果要使用改变之后的状态，需要使用回调函数
  • 如果新的状态要根据之前的状态进行运算，使用函数的方式改变

React会对异步的setState进行优化，将多次setState结果进行改变

生命周期

生命周期：组件从诞生到销毁会经历一系列的过程，这个过程称之为生命周期。React在组件的生命周期中提供了一系列的勾子函数，可以让开发者在函数中注入代码，让这些代码在适当时候运行。

生命周期仅仅存在于类组件，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁

旧版生命周期

React<16.0.0

1.constructor

​ 1.同一个组件对象只会创建一次

​ 2.不能在第一次挂载到页面之前，调用setState,因此构造函数中严禁使用setState

2.componentWillMount

​ 1.正常情况下，和构造函数一样，它只会运行一次

​ 2.可以使用setState,但是为了避免BUG，不允许使用，因为在某些特殊情况下，该函数可能被调用多次

3.render

​ 1.返回一个虚拟DOM，会被挂载到虚拟DOM树，最终渲染到页面的真实DOM中

​ 2.render可能不只运行一次，只需要重新渲染，就会重新运行

​ 3.严禁使用setState,可能会导致无限递归渲染

4.componentDidMount

​ 1.只会执行一次

​ 2.可以使用setState

​ 3.通常情况下，会将网络请求，启动计时器等一开始需要的操作，书写到该函数中

5.组件进入活跃状态

6.componentWillReceiveProps

​ 1.即将接受新的属性值

​ 2.参数为新的对象属性值

​ 3.该函数可能会导致一些BUG，不推荐使用

7.shouldComponentUpdate

​ 1.指示React是否要重新渲染该组件，通过返回true和false来指定

​ 2.默认情况下直接返回true

8.componentWillUpdate

​ 1.组件即将被重新渲染

9.componentDidUpdate

​ 1.往往在该函数中使用Dom操作，改变元素

10.componentWillUnmount

​ 1.通常在该函数中销毁一些组件依赖[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sCui2xY7-1636425878315)(C:\Users\94760\Desktop\笔记\React.assets\IMG_20211105_155758.jpg)]的资源，比如计数器

新版生命周期

React>16.0.0

1.getDerivedStateFromProps

​ 1.通过参数获取新的属性和状态

​ 2.该函数是静态的

​ 3.该函数的返回值会覆盖掉组件状态

​ 4.该函数没什么用

2.getSnapshotBeforeUpdate

​ 1.真实的DOM构建完成，但未实际渲染到页面中

​ 2.在该函数中，通常用于实现一些附加的DOM操作

​ 3.该函数的返回值，会作为componentDidUpdate的第三个参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6PbFjGte-1636425878317)(C:\Users\94760\Desktop\笔记\React.assets\IMG_20211105_155724.jpg)]

表单

受控组件和非受控组件

受控组件：组件的使用者，有能力完全控制该组件的行为和内容 。通常情况下，受控组件往往没有自身状态，其内容完全受到属性的控制。

非受控组件：组件的使用者，没有能力控制该组件的行为和内容，组件的行为和内容完全自行控制。

表单组件默认情况下是非受控组件，一旦设置表单组件的value属性。