react高阶组件、hooks

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

1.高阶组件

1.1概念

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

1.2 高阶组件的使用场景

• 需要代码重用时，react如果有多个组件都用到了同一段逻辑，就可以把共同的逻辑把部分提取出来，利用高阶组件的形式将这段逻辑整合到每一个组件中，从而减少代码的逻辑重复
• 需要组件增强优化时，比如我们在项目中使用的组件有些不是自己写的，而是从网上copy下来的，但是第三方写的组件可能比较复杂，有时不能完全满足需求，但第三方组件不易修改，此时也可以用高阶组件，在不修改原始组件的前提下，对组件添加满足实际开发需求的功能

1.3 高阶组件的实现方式

原始组件的路由信息会传入高阶组件的props中，可以对props进行增删改！！！

1.3.1 属性代理

属性代理：通过创建新组件来包裹原始组件，把原始组件作为新组件的子组件渲染。

功能：可实现对原始组件的props数据更新 和组件模板更新优化

//一般来说，高阶组件中的父组件，会对原始组件模板做增强优化
		return (
          <div>
            <nav> <h3>这是高阶组件增加的导航栏</h3> </nav>
            <OldCom/>
          </div>
        )

Jetbrains全家桶1年46，售后保障稳定

1.3.1.1 原始组件没有路由信息，高阶组件向原始组件添加路由信息

props由父组件传递给子组件，对子组件而言，props是只读的。由于props是只读的，不能改，所以在子组件中要对它进行深复制然后再修改

补：深复制的两种方式

• this.tempProps=JSON.parse(JSON.stringify(props)) 这中方法深复制会丢失函数
• this.tempProps={…props} 这种方法深复制不会丢函数,只能深复制第一层

      //高阶组件向原始组件添加路由信息
		return (
          <div>
            <nav> <h3>这是高阶组件增加的导航栏</h3> </nav>
            <OldCom {...this.tempProps} />
          </div>
        )

对props数据进行增删改操作：

• 增：this.tempProps.name=“张三”
• 删： 1.es5删除 delete this.tempProps.match 2.es6 删除 如下：

 var {match,...tempObj}=this.tempProps
 this.tempProps = tempObj
//把tempProps对象解析为match和tempObj并赋值，剩下的tempObj没有含有match字段所以直接取值即可得到没有含有match字段的props对象

• 改：this.tempProps.history.action=“PUSH”

属性代理只能操作props数据，不能操作state数据，无法调用原始组件的state，如果需要修改state数据请使用反向继承实现。

1.3.2 反向继承

反向继承：通过创建新组建继承自原始组件，把原始组件作为父类

功能：可实现对原始组件的state状态数据更新 和 组件模板更新。注意：反向继承结构中新组件和原始组件必须都是类组件。

反向继承指的是让新组件类继承原始组件类，新组件为子类，原始组件为父类，因为当前组件类继承与原始组件类，子类可以直接调用父类的数据。

1.3.2.1 在高阶组件中渲染父类模板

需要使用super调用父类的render渲染函数，渲染父类模板

        return <div>
          <nav> <h3>这是高阶组件增加的导航栏</h3> </nav>
          {super.render()}
        </div>

1.4 高阶组件的实现步骤

1.4.1 新建高阶组件文件 MyHOC.jsx

1.4.2 在文件中创建函数 ，函数的参数是一个组件OldCom，函数的返回值也是一个组件NewCom

function MyHoc(OldCom){
      return class NewCom extends React.Component{
        render(){
            let newProps = { age: 10, sex: '男' }
            return (
              <OldCom {...newProps} ></OldCom>
            )
        }
      }
    }
    属性代理(上)或者(反向继承)
    function MyHOC (OldCom){
      return class NewCom extends OldCom{
        componentDidMount() {
          this.setState({ name: '李四' })
        }
        render() {
          return super.render()
        }
      }
    }

1.4.3 导出高阶组件函数

export default MyHOC

1.4.4 在需要使用高阶组件的组件中导入

import MyHoc1 from “./MyHOC1”

1.4.5 在导出组件时，使用高阶组件处理之后，再导出

export default MyHoc2(MyCom)

1.5 渲染劫持

高阶组件的渲染劫持：通过高阶组件把原始组件的模板进行修改和替换，如果要返回原始组件模板，把原始组件作为子组件返回即可。

return <OldCom/>

渲染劫持指对一个组件渲染内容的装饰或修改，一般通过高阶组件来实现，把一个组件传入高阶组件，可以对这个组件的模板进行修改后执行渲染，也可以阻止组件渲染，并修改组件中的数据和逻辑

渲染劫持的应用：一般用于一些需要登录状态的页面，在路由请求渲染页面(订单页)之前，使用告诫组件判断是否已登录，如果已登录，返回订单页模板，如果没有登录，返回空，并跳转到登录页

2. hooks

hooks是react新版本提供的组合式API语法，类似于vue3组合式API，也叫hooks

hooks有什么用：使函数式组件拥有组件状态和生命周期功能，提高运行效率，避免this指向问题。

2.1语法函数useState

useState定义的引用类型数据，更新时，需要修改数据的内存地址，也就是深拷贝，才会更新视图。

2.1.1 从react中导入语法函数setState

import React, { useState } from “react”

2.1.2 在函数式组件中，使用setState创建状态数据

使用useState创建状态数据，参数是默认值，返回值是数组，数组中第一个值是状态数据的变量名，第二个值是更新函数，调用会刷新视图。使用useState创建状态数据需要引入useState函数。

import { useState ,useEffect} from ‘react’;

const [name, setName] = useState(“名字”)

2.1.3 在组件模板中，直接调用状态名即可

自定义状态name: {name}-{age}

2.1.4 使用setState函数返回的更新函数修改状态值，参数是新值，修改后自动刷新界面

setName(“李四”)

2.2 useEffect函数实现函数式组件的生命周期函数

2.2.1 引入useEffect

import { useEffect} from ‘react’;

2.2.2 使用useEffect

2.2.2.1 第一个参数

使用useEffect函数实现函数式组件的生命周期，默认参数是回调。当组件初始化和状态数据更新时，执行回调函数，相当于render

useEffect(()=>{
    // 如果不加第二个参数, 初始化时调用, 任何状态更新都会调用
    console.log("effect");
  })

2.2.2.2 第二个参数

第二个参数可控制回调的调用时机，[]表示只在初始化时调用，相当于生命周期componentDidMount，在这里请求数据

 useEffect(()=>{
     // 如果第二个参数是空数组, 则只在初始化时调用,状态更新时不会调用
    console.log("组件初始化");
  },[])

2.2.2.3 第二个参数指定哪些数据更新执行回调

 useEffect(()=>{
     // 如果第二个参数数组中有状态名, 则只会在数组中的状态更新时调用
        console.log("组件初始化或count或arr更新");
  },[count,arr])

等count，arr更新时才会执行第一个回调函数

3.在react路由6.0封装withRouter

在react-router6.0中所有的组件都没有路由信息,也没有withRouter, 需要使用hooks语法引入路由信息, 所以,我们可以自己封装withRouter高阶组件。由于路由数据是在props中，所以使用属性代理方式。

import { useHistory, useLocation, useRouteMatch } from "react-router-dom"

function myHoc(OldCom){
    // 必须返回函数式组件, 因为hooks语法不能用于类组件
    return ()=>{
        // 从hooks中获取路由信息
        const history = useHistory()
        const location = useLocation()
        const match = useRouteMatch()
        const tempProps = {history, location, match}

        // 返回组件模板
        return <OldCom {...tempProps} />
    }
}

export default myHoc