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 (
    <div>
      <nav><h3>这是高阶组件增加的导航栏</h3></nav>
      <OldCom/>
    </div>
  )

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 <div><h1>这是订单页的高阶组件</h1></div>

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

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

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

有两种深复制方式如下：

// this.tempProps = JSON.parse(JSON.stringify(props))

• 第一种深复制会丢失函数，因为JSON里面不识别函数，所以不能放函数

this.tempProps = {...props}

• 第二种深复制不会丢失函数，但只能深复制第一层。

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

1. 增

this.tempProps.name = "张三"
console.log(this.tempProps);

2. 删

delete this.tempProps.match  // ES5 删除属性 
var { location, ...tempObj} = this.tempProps  // ES6 解构删除
this.tempProps = tempObj
console.log(this.tempProps);

3. 改

this.tempProps.history.action = "PUSH"