（二）React面向组件编程

作者: 生命里那束光 | 来源:发表于2022-04-15 14:36 被阅读0次

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，随后替换掉页面中之前的真实DOM
   b. 旧虚拟DOM中未找到与新虚拟DOM相同的key
              根据数据创建新的真实DOM，随后渲染到到页面
用index作为key可能会引发的问题：
1.若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
2.如果结构中还包含输入类的DOM：
会产生错误DOM更新 ==> 界面有问题。
3.注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
仅用于渲染列表用于展示，使用index作为key是没有问题的。

开发中如何选择key?:
1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
2.如果确定只是简单的展示数据，用index也是可以的。

[图片上传失败...(image-8cf903-1650004549218)]

（二）React面向组件编程

React面向组件编程

一、模块化与组件化理解

二、组件

函数式组件

函数组件使用props

类式组件

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

核心属性1: state🔥

1. 概念

2. 基本使用

3. state简写方式

核心属性2: props🔥

1. 概念

2. 基本使用

3. 对props进行限制

4. props简写方式

核心属性3: refs🔥

1. 概念

2. 字符串形式的ref

3. 回调形式的ref

4. createRef创建ref容器

事件处理

四、收集表单数据

受控组件

不受控组件

区别是什么

高阶函数

函数的柯里化

五、组件的生命周期

旧版钩子函数【淘汰】

新版钩子函数【新增】

六、虚拟dom中Diffing算法

react-Diff算法：

key的作用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

React基础