React学习（二）-CSDN博客

本文链接：https://blog.csdn.net/zouzi1/article/details/122630115

本人学习视频为B站尚硅谷，视频连接为：尚硅谷React

受控组件和非受控组件

受控组件

一般是现用现取，即需要用的时候通过ref进行传递
在这里插入图片描述

非受控组件

即输入时就可以查看输入内容并通过state状态保存
在这里插入图片描述

补充知识

高阶函数

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等

函数柯里化

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
function sum(a){
return(b)=>{
return ©=>{
return a+b+c
}
}
}
[dataType]是变量，而少去[]则是相当于’dataType’是字符串形式传入
在这里插入图片描述

不用柯里化实现非受控

在这里插入图片描述

生命周期

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

点击按钮卸载组件

生命周期（旧）

在这里插入图片描述

初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()
componentWillMount()
render()
componentDidMount()

在这里插入图片描述

更新阶段: 由组件内部this.setSate触发

shouldComponentUpdate()
componentWillUpdate()
render() =====> 必须使用的一个
componentDidUpdate()

如果阀门函数返回的是false则无法进行更新

强制更新阶段

componentWillUpdate()
render() =====> 必须使用的一个
componentDidUpdate()

更新阶段: 由父组件render触发

1.componentWillReceiveProps
2. shouldComponentUpdate()
3. componentWillUpdate()
4. render() =====> 必须使用的一个
5. componentDidUpdate()
componentWillReceiveProps这个是接收到新的参数才调用，第一次初始化render是不会调用

在这里插入图片描述

生命周期（新）

==新生命周期在React17版本以上适用，删除了原来的componentWillMount()，componentWillUpdate()，componentWillReceiveProps（）阶段，新增了getDerivedStateFromProps（）和getSnapshotBeforeUpdate（）阶段，并如下图所示：
在这里插入图片描述

初始化阶段: 由ReactDOM.render()触发—初次渲染

*1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息*
在这里插入图片描述

更新之前

初始化阶段: 由ReactDOM.render()触发—初次渲染

constructor()
getDerivedStateFromProps
render()
componentDidMount() =====> 常用一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
更新阶段: 由组件内部this.setSate()或父组件重新render触发
getDerivedStateFromProps
shouldComponentUpdate()
render()
getSnapshotBeforeUpdate
componentDidUpdate()

在这里插入图片描述

更新之后

在这里插入图片描述

getSnapshotBeforeUpdate的使用

在这里插入图片描述

即将废弃的勾子

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

diff算法

在每次更新render的时候，都是按照标签节点来比较虚拟DOM和真实DOM，如果标签内容发生更改，则会进行重新生成虚拟DOM并替换掉真实DOM，无发生更改则不替换操作，目的是为了增加效率。
在这里插入图片描述

key标识问题

虚拟DOM中key的作用：
(1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。
(2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,
随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
b. 旧虚拟DOM中未找到与新虚拟DOM相同的key,根据数据创建新的真实DOM，随后渲染到到页面

使用index作为唯一标识(更新人员放最上面)

慢动作回放----使用index索引值作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=0>小张---18<input type="text"/></li>
					<li key=1>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=0>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

解析：使用index作为唯一标识key的时候，由于小王在最上面，key=0作为标识，而之前的key=0是小张，diff算法为最小标签算法，识别li标签内容改变重新替换展示DOM，但是input标签识别内容不变，因此保存在真实DOM，因此造就这种情况,同时由于内容的改变导致效率低
在这里插入图片描述

在这里插入图片描述

使用id作为唯一标识(更新人员放在最上面)

慢动作回放----使用id唯一标识作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=3>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

解析：使用id作为key标识，在新数据生成新的虚拟DOM，比较后发现小张和小李的key不变没有替换，input也一样，因此不会发生偏移的情况，同时只有小王一个新的虚拟DOM来添加到真实DOM，不同于上面三个真实DOM都要替换，效率也提高了不少
在这里插入图片描述