react 高阶组件 hooks 状态管理 虚拟DOM 组件库

一.高阶组件

一,高阶组件(Higher Order Component,简称:HOC ):

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

二,高阶组件的使用场景:

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

三,高阶组件的实现方式

1, 属性代理: 通过创建新组建来包裹原始组件, 把原始组件作为新组件的子组件渲染 功能: 可实现对原始组件的 props数据更新 和 组件模板更新
2, 反向继承: 通过创建新组建继承自原始组件, 把原始组件作为父类 功能: 可实现对原始组件的state状态数据更新 和 组件模板更新

四,高阶组件的渲染劫持: 通过高阶组件把原始组件的模板进行修改和替换

1,渲染劫持指对一个组件渲染内容的装饰或修改, 一般通过高阶组件来实现, 把一个组件传入高阶组件, 可以对这个组件的模板进行修改后执行渲染, 也可以阻止组件渲染,并修改组件中的数据和逻辑
2,渲染劫持的应用: 一般用于一些需要登录状态的页面, 在路由请求渲染页面(如订单页)之前, 使用高阶组件判断是否已登录,如果已登录,返回订单页模板, 如果没有登录,返回空,并跳转到登录页

五，高阶组件的实现步骤:
1, 新建高阶组件文件 MyHOC.jsx
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()
    }
  }
}

3, 导出高阶组件函数

  export default MyHOC

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

  import MyHoc1 from "./MyHOC1"

5, 在导出组件时,使用高阶组件处理之后,再导出

  export default MyHoc2(MyCom)

二．ｈｏｏｋｓ

什么是hooks?

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

hooks有什么用?

使函数式组件拥有组件状态和生命周期功能, 避免this指向问题, 提高运行效率

总结:在函数式组件中, 使用hooks语法模拟状态数据的步骤

1, 从react中导入语法函数setState
    import React, { useState } from "react"
2, 在函数式组件中, 使用setState创建状态数据
    const [name, setName] = useState("名字")
3, 在组件模板中, 直接调用状态名即可
    自定义状态name: {name}-{age}
4, 使用setState函数返回的更新函数修改状态值, 参数是新值,修改后自动刷新界面
    setName("吴亦凡")

 useEffect() 这个函数可以用来模拟组件的生命周期函数, 他有两个参数, 
     第一个参数是回调函数, 当组件初始化完成和状态更新时调用
     第二个参数是一个数组,可选, 数组中是状态名, 指定那些状态值更新会触发回调函数
    useEffect(()=>{
   
         如果不加第二个参数, 初始化时调用, 任何状态更新都会调用
        console.log("组件初始化,或有状态更新ComponentWillUpdate")
    })  
    useEffect(()=>{
   
         如果第二个参数是空数组, 则只在初始化时调用,状态更新时不会调用
        console.log("ComponentDidMount")