React面向组件编程
一、模块化与组件化理解
一、模块
概念：向外提供特定功能的js程序, 一般就是一个js文件。
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用js, 简化js的编写, 提高js运行效率
二、模块化
- 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用。
三、组件
概念：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
比如一个网页的头部部分，里面可以有css样式，img，js，html等，这放在一块就可以组成一个头部组件。
为什么要用组件： 一个界面的功能更复杂，对通用部分进行封装
作用：复用编码, 简化项目编码, 提高运行效率
四、组件化
- 当应用是以多组件的方式实现, 这个应用就是一个组件化的应用
五、React调试工具
[图片上传失败...(image-ac374e-1650004549217)]
二、组件
函数式组件
[图片上传失败...(image-a8201-1650004549218)]
函数组件使用props
[图片上传失败...(image-a94488-1650004549218)]
类式组件
渲染类组件标签的基本流程：
React内部会创建组件实例对象
调用render()得到虚拟DOM, 并解析为真实DOM
插入到指定的页面元素内部
[图片上传失败...(image-38bab-1650004549218)]
组件定义注意事项：
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签
三、组件实例三大核心属性
只有Class类式组件才有组件实例！！！
此部分内容的JS基础：判断this指向、class类及继承、原型与原型链
核心属性1: state🔥
1. 概念
- state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
- 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
2. 基本使用
[图片上传失败...(image-e788aa-1650004549218)]
3. state简写方式
[图片上传失败...(image-63df31-1650004549218)]
核心属性2: props🔥
1. 概念
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
2. 基本使用
[图片上传失败...(image-a592c8-1650004549218)]
3. 对props进行限制
[图片上传失败...(image-94f600-1650004549218)]
4. props简写方式
[图片上传失败...(image-b75707-1650004549218)]
核心属性3: refs🔥
1. 概念
- 组件内的标签可以定义ref属性来标识自己
2. 字符串形式的ref
[图片上传失败...(image-3d1fee-1650004549218)]
- 字符串形式ref存在效率问题
3. 回调形式的ref
[图片上传失败...(image-af91f8-1650004549218)]
4. createRef创建ref容器
[图片上传失败...(image-c7e70a-1650004549218)]
[图片上传失败...(image-38c79c-1650004549218)]
事件处理
- 通过onXxx属性指定事件处理函数(注意大小写)
-
React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ——为了更好的兼容性
return <h1 onclick={this.事件名}></h1> //原生DOM事件 return <h1 onClick={this.事件名}></h1> //React自定义(合成)事件 -
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
[图片上传失败...(image-bc4d30-1650004549218)]
- 通过event.target得到发生事件的DOM元素对象——不要过度使用ref
-
当发生事件的元素和需要操作的元素为同一个时，可以省略元素内的ref，使用event
[图片上传失败...(image-e1c740-1650004549218)]
四、收集表单数据
- 包含表单的组件：受控组件和不受控组件
受控组件
- 现取现用，不会存储到state中
//创建组件
class Login extends React.Component{
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this
alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input ref={c => this.username = c} type="text" name="username"/>
密码：<input ref={c => this.password = c} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
不受控组件
- 存入状态中，以后使用从状态中获取
//创建组件
class Login extends React.Component{
//初始化状态
state = {
username:'', //用户名
password:'' //密码
}
//保存表单数据到状态中
saveFormData = (dataType)=>{
return (event)=>{
this.setState({[dataType]:event.target.value})
}
}
//表单提交的回调
handleSubmit = (event)=>{
event.preventDefault() //阻止表单提交
const {username,password} = this.state
alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
}
render(){
return(
<form onSubmit={this.handleSubmit}>
用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
<button>登录</button>
</form>
)
}
}
//渲染组件
ReactDOM.render(<Login/>,document.getElementById('test'))
//这里用到了函数的柯里化
//#region
/*
高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map()等等
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
function sum(a){
return(b)=>{
return (c)=>{
return a+b+c
}
}
}
*/
//#endregion
区别是什么
1.共同点，都是指表单元素，或者表单组件
2.不同点，被react的state控制，就是受控组件。不会state控制，就是非受控。
3.受控组件的实现方式，就是设置state，使用事件调用setstate，更新数据和视图。
4.非受控组件，避开state，使用ref等等方式，更新数据和视图。
高阶函数
- 若一个函数，接收的参数是一个函数，那么这个函数就可以被称为高阶函数。
- 若一个函数，调用的返回值依然是一个函数，那么这个就可以被称为高阶函数。
常见的高阶函数有：Promise、setTimeout、arr.map() 等等。
函数的柯里化
通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
<script>
function sum(a,b,c){
return a+b+c
}
//函数的柯里化 （高阶函数）
function sum(a){
return(b)=>{
return(c)=>{
return a+b+c
}
}
}
const result = sum(1)(2)(3)
console.log(result);
</script>
五、组件的生命周期
- React 的生命周期从广义上分为三个阶段：挂载、渲染、卸载
- 因此可以把 React 的生命周期分为两类：挂载卸载过程和更新过程
旧版钩子函数【淘汰】
- 了解即可，因为现在一般都是用新版的，但是有些公司以前的项目是用旧版本写的，这时你就需要知道里面一些钩子函数是做什么用的
- 16.3之前的版本生命周期图示：
[图片上传失败...(image-fad27d-1650004549218)]
初始化阶段: 由ReactDOM.render()触发---初次渲染
1. **constructor**() 2. **componentWillMount**() 3. **render**() 4. **componentDidMount**() **=====>** 常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息更新阶段: 由组件内部this.setSate()或父组件render触发
1. **shouldComponentUpdate**() 2. **componentWillUpdate**() 3. **render**() **=====>** 必须使用的一个 4. **componentDidUpdate**()卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. **componentWillUnmount**() **=====>** 常用 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
[图片上传失败...(image-bcb031-1650004549218)]
- 旧版本独有的，
17.0版本已经删除了的钩子函数(17.0之前的版本仍可以继续使用)： -
componentWillMount，componentWillReceiveProps，componentWillUpdate - 在使用这几个钩子函数时，前面要加
UNSAFE_
新版钩子函数【新增】
[图片上传失败...(image-8f0479-1650004549218)]
初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor() 2. getDerivedStateFromProps 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps 作用：为了让 `props` 能更新到组件内部 `state`中 2. shouldComponentUpdate() 3. render() 4. getSnapshotBeforeUpdate 5. componentDidUpdate()卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
[图片上传失败...(image-1011c0-1650004549218)]
重要的勾子
render：初始化渲染或更新渲染调用
componentDidMount：开启监听, 发送ajax请求
componentWillUnmount：做一些收尾工作, 如: 清理定时器
即将废弃的勾子
componentWillMount
componentWillReceiveProps
componentWillUpdate
现在使用会出现警告，下一个大版本需要加上UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。
六、虚拟dom中Diffing算法
传统Diff算法：当我们在对比两个对象树的差异时,传统的Diff算法是利用循环递归的方式对所有节点依次对比,算法的复杂度为O(n * n * n),其中n为节点总数,怎么样看起来很恐怖吧,试想一个大项目中DOM树的节点树的立方...所以显然如果react不对传统的Diff算法进行优化的话那么在大项目中的性能将会存在极大瓶颈,
react-Diff算法：
核心概念
1. Diff 算法性能突破的关键点在于“分层对比”；
[图片上传失败...(image-110d5f-1650004549218)]
- React 的 Diff 过程直接放弃了跨层级的节点比较，它只针对相同层级的节点作对比，如上图所示。这样一来，只需要从上到下的一次遍历，就可以完成对整棵树的对比，这是降低复杂度量级方面的一个最重要的设计
2.类型一致的节点才有继续 Diff 的必要性
[图片上传失败...(image-248bf8-1650004549218)]
- 最高效的算法应该是直接将 A 子树移动到 D 节点，但这样就涉及到跨层级比较，时间复杂度会陡然上升。React 的做法比较简单，它会先删除整个 A 子树，然后再重新创建一遍。
[图片上传失败...(image-bd78ab-1650004549218)]
- 当 D 节点改为 G 节点时，整棵 D 子树也会被删掉，E、F 节点会重新创建
3.key 属性的设置，可以帮我们尽可能重用同一层级内的节点。
[图片上传失败...(image-e5ef58-1650004549218)]
- 当没有 key 的时候，如果中间插入一个新节点，Diff 过程中从第三个节点开始的节点都是删除旧节点，创建新节点。当有 key 的时候，除了第三个节点是新创建外，第四和第五个节点都是通过移动实现的。
key的作用
经典面试题:
1). react/vue中的key有什么作用？（key的内部原理是什么？）
2). 为什么遍历列表时，key最好不要用index?
虚拟DOM中key的作用
1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,
随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：
a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOMb. 旧虚拟DOM中未找到与新虚拟DOM相同的key 根据数据创建新的真实DOM，随后渲染到到页面
- 用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2.如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
3.注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
仅用于渲染列表用于展示，使用index作为key是没有问题的。- 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果确定只是简单的展示数据，用index也是可以的。
[图片上传失败...(image-8cf903-1650004549218)]
