React全家桶（二）组件化编程

🔥React全家桶🔥

React全家桶	地址
React全家桶(一)之React入门🔥	https://blog.csdn.net/article/124120080
React全家桶(二)之组件化编程🔥	https://blog.csdn.net/article/124194107
React全家桶(三)之React脚手架🔥	https://blog.csdn.net/article/124281588
React全家桶(四)之axios请求数据🔥	https://blog.csdn.net/article/124281650
React全家桶(五)之React-router路由🔥	https://blog.csdn.net/article/124453733
React全家桶(六)之redux状态管理🔥	https://blog.csdn.net/article/124454379

React面向组件编程

✍目录总览：

一、模块化与组件化理解

一、模块

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

二、模块化

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

三、组件

概念：用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)
比如一个网页的头部部分，里面可以有css样式，img，js，html等，这放在一块就可以组成一个头部组件。
为什么要用组件： 一个界面的功能更复杂，对通用部分进行封装
作用：复用编码, 简化项目编码, 提高运行效率

四、组件化

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

五、React调试工具

二、组件

函数式组件

函数组件使用props

类式组件

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

1. React内部会创建组件实例对象

2. 调用render()得到虚拟DOM, 并解析为真实DOM

3. 插入到指定的页面元素内部

组件定义注意事项：

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

三、组件实例三大核心属性

只有Class类式组件才有组件实例！！！

此部分内容的JS基础：判断this指向、class类及继承、原型与原型链

核心属性1: state🔥

1. 概念

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

2. 基本使用

3. state简写方式

核心属性2: props🔥

1. 概念

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

2. 基本使用

3. 对props进行限制

4. props简写方式

核心属性3: refs🔥

1. 概念

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

2. 字符串形式的ref

• 字符串形式ref存在效率问题

3. 回调形式的ref

4. createRef创建ref容器

事件处理

1. 通过onXxx属性指定事件处理函数(注意大小写)

• React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ——为了更好的兼容性

  return <h1 onclick={this.事件名}></h1> //原生DOM事件
  return <h1 onClick={this.事件名}></h1> //React自定义(合成)事件  
  

• React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)

  

2. 通过event.target得到发生事件的DOM元素对象——不要过度使用ref

• 当发生事件的元素和需要操作的元素为同一个时，可以省略元素内的ref，使用event

  

四、收集表单数据

• 包含表单的组件：受控组件和不受控组件

受控组件

• 现取现用，不会存储到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之前的版本生命周期图示：

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

​ 1. constructor()

​ 2. componentWillMount()

​ 3. render()

​ 4. componentDidMount() =====> 常用

​ 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件render触发

​ 1. shouldComponentUpdate()

​ 2. componentWillUpdate()

​ 3. render() =====> 必须使用的一个

​ 4. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

​ 1. componentWillUnmount() =====> 常用

​ 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

• 旧版本独有的，17.0版本已经删除了的钩子函数(17.0之前的版本仍可以继续使用)：
• componentWillMount，componentWillReceiveProps，componentWillUpdate
• 在使用这几个钩子函数时，前面要加UNSAFE_

新版钩子函数【新增】

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

​ 1. constructor()

​ 2. getDerivedStateFromProps

​ 3. render()

​ 4. componentDidMount() =====> 常用

​ 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发

​ 1. getDerivedStateFromProps

​ 作用：为了让 props 能更新到组件内部 state中

​ 2. shouldComponentUpdate()

​ 3. render()

​ 4. getSnapshotBeforeUpdate

​ 5. componentDidUpdate()

3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发

​ 1. componentWillUnmount() =====> 常用

​ 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

重要的勾子

1. render：初始化渲染或更新渲染调用

2. componentDidMount：开启监听, 发送ajax请求

3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

即将废弃的勾子

1. componentWillMount

2. componentWillReceiveProps

3. componentWillUpdate

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

六、虚拟dom中Diffing算法

传统Diff算法：当我们在对比两个对象树的差异时,传统的Diff算法是利用循环递归的方式对所有节点依次对比,算法的复杂度为O(n * n * n),其中n为节点总数,怎么样看起来很恐怖吧,试想一个大项目中DOM树的节点树的立方…所以显然如果react不对传统的Diff算法进行优化的话那么在大项目中的性能将会存在极大瓶颈,

react-Diff算法：

核心概念

1. Diff 算法性能突破的关键点在于“分层对比”；

• React 的 Diff 过程直接放弃了跨层级的节点比较，它只针对相同层级的节点作对比，如上图所示。这样一来，只需要从上到下的一次遍历，就可以完成对整棵树的对比，这是降低复杂度量级方面的一个最重要的设计

2.类型一致的节点才有继续 Diff 的必要性

• 最高效的算法应该是直接将 A 子树移动到 D 节点，但这样就涉及到跨层级比较，时间复杂度会陡然上升。React 的做法比较简单，它会先删除整个 A 子树，然后再重新创建一遍。

• 当 D 节点改为 G 节点时，整棵 D 子树也会被删掉，E、F 节点会重新创建

3.key 属性的设置，可以帮我们尽可能重用同一层级内的节点。

• 当没有 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，随后替换掉页面中之前的真实DOM

​ b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
​ 根据数据创建新的真实DOM，随后渲染到到页面

2. 用index作为key可能会引发的问题：
   1.若对数据进行：逆序添加、逆序删除等破坏顺序操作:
   会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
   2.如果结构中还包含输入类的DOM：
   会产生错误DOM更新 ==> 界面有问题。
   3.注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
   仅用于渲染列表用于展示，使用index作为key是没有问题的。
3. 开发中如何选择key?:
   1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
   2.如果确定只是简单的展示数据，用index也是可以的。