react高阶组件和hooks

1. react高阶组件

1.1 高阶组件的概念

高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组件, 而是一个函数, 这个函数接受一个react组件作为参数,并返回一个新组件, 实现了对原有组件的增强和优化, 可以对原有组件中的state, props和逻辑执行增删改操作, 一般用于代码重用和组件增强优化

概述:高阶组件是一个函数,而不是组件,但其参数和返回值都是组件

1.2 高阶组件的使用场景

1.2.1 需要代码重用时

react如果有多个组件都用到同一端逻辑,这是就可以把共同的逻辑部分提取出来,利用高阶组件的形式将这段逻辑整合到每一个组件中,从而减少代码的逻辑重复。

1.2.2 需要组件增强优化时

比如我们在项目中使用的组件有些不是自己写的,而是从网上撸下来的,但是第三方写的组件可能比较复杂,有时不能完全满足需求,且第三方组件不易修改,此时也可以用高阶组件。在不修改原始组件的前提下,对组件添加满足实际开发需求的功能。

一般来说,高阶组件在的父组件,会对原始组件模板做增强优化

return (
    
)

1.3 高阶组件的实现方式

1.3.1 属性代理

流程:通过创建新组件来包裹原始组件,把原始组件作为新组件的子组件渲染

功能:可实现对原始组件的 props数据更新组件模板更新

示例代码如下:

import React, { Component } from 'react'
function myHoc(OldCom){
  return class NewCom extends Component {
    constructor(props){
      super(props);
      console.log(props);  // 路由信息会传入高阶组件的props中,可以对它进行增删改
    }
    render() {
       return (
// 如果返回一个新模板,相当于把原始组件直接替换了,这就是渲染劫持
          return 

这是订单页的高阶组件

// 如果要返回原始组件模板,把原始组件作为子组件返回即可 // return ) } } } export default myHoc // 导出高阶组件这个函数

注意:在构造器中路由信息会传入高阶组件的props中,可以对它进行增删改

由于props是只读的,不能修改,要对其进行深复制,然后再进行修改

有两种深复制方式如下:

// this.tempProps = JSON.parse(JSON.stringify(props))
  • 第一种深复制会丢失函数,因为JSON里面不识别函数,所以不能放函数
this.tempProps = {...props}
  • 第二种深复制不会丢失函数,但只能深复制第一层。

此处使用第二种方式,对props进行增删改操作:

this.tempProps.name = "张三"
console.log(this.tempProps);
delete this.tempProps.match  // ES5 删除属性 
var { location, ...tempObj} = this.tempProps  // ES6 解构删除
this.tempProps = tempObj
console.log(this.tempProps);
this.tempProps.history.action = "PUSH"

你可能感兴趣的:(react.js,前端)