🔥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
类式组件
渲染类组件标签的基本流程:
-
React内部会创建组件实例对象
-
调用render()得到虚拟DOM, 并解析为真实DOM
-
插入到指定的页面元素内部
组件定义注意事项:
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟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容器
事件处理
- 通过onXxx属性指定事件处理函数(注意大小写)
-
React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ——为了更好的兼容性
return <h1 onclick={this.事件名}></h1> //原生DOM事件 return <h1 onClick={this.事件名}></h1> //React自定义(合成)事件
-
React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
- 通过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之前的版本生命周期图示:
- 初始化阶段: 由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() =====> 常用
一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息
- 旧版本独有的,
17.0
版本已经删除了的钩子函数(17.0
之前的版本仍可以继续使用): componentWillMount
,componentWillReceiveProps
,componentWillUpdate
- 在使用这几个钩子函数时,前面要加
UNSAFE_
新版钩子函数【新增】
- 初始化阶段: 由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() =====> 常用
一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息
重要的勾子
-
render:初始化渲染或更新渲染调用
-
componentDidMount:开启监听, 发送ajax请求
-
componentWillUnmount:做一些收尾工作, 如: 清理定时器
即将废弃的勾子
-
componentWillMount
-
componentWillReceiveProps
-
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,随后渲染到到页面
- 用index作为key可能会引发的问题:
1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2.如果结构中还包含输入类的DOM:
会产生错误DOM更新 ==> 界面有问题。
3.注意!如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,
仅用于渲染列表用于展示,使用index作为key是没有问题的。- 开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果确定只是简单的展示数据,用index也是可以的。