点击刷新
一、模块化与组件化理解
一、模块
概念： 向外提供特定功能的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.1 constructor()
1.2 componentWillMount()
1.3 render()
1.4 componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息2、更新阶段: 由组件内部this.setSate()或父组件render触发
2.1. shouldComponentUpdate()
2.2 componentWillUpdate()
2.3 render() =====> 必须使用的一个
2.4 componentDidUpdate()3、卸载组件: 由ReactDOM.unmountComponentAtNode()触发
3.1 componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
● 旧版本独有的，17.0版本已经删除了的钩子函数(17.0之前的版本仍可以继续使用)：
● componentWillMount，componentWillReceiveProps，componentWillUpdate
● 在使用这几个钩子函数时，前面要加UNSAFE_
新版钩子函数【新增】
1、初始化阶段: 由ReactDOM.render()触发—初次渲染
1.1 constructor()
1.2 getDerivedStateFromProps
1.3 render()
1.4 componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息2、更新阶段: 由组件内部this.setSate()或父组件重新render触发
2.1 getDerivedStateFromProps
作用：为了让 props 能更新到组件内部 state中
2.2 shouldComponentUpdate()
2.3 render()
2.4 getSnapshotBeforeUpdate
2.5 componentDidUpdate()3、卸载组件: 由ReactDOM.unmountComponentAtNode()触发
3.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、虚拟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也是可以的。
© 著作权归作者所有
发表评论
