React 高阶组件 (HOC)

可时间不会倒流

已于 2024-08-06 11:36:50 修改

阅读量725

点赞数 24

文章标签： javascript 前端 react.js

于 2024-08-06 11:27:52 首次发布

本文链接：https://blog.csdn.net/L1272427/article/details/140950625

版权

1、什么是高阶组件
- 高阶组件是一个函数，接收一个组件作为参数，返回一个新的组件，一般来讲，传入的组件会作为新组件的视图
2、为什么要引入高阶组件，高阶组件是用来干什么的？
- 高阶组件的出现是为了解决早期类组件的公共逻辑抽离的问题，再没有出现Hook的时候，类组件占主流，但随着 Hook 的出现，函数组件开始占主流，React的开发思想开始从面向对象转为了函数式编程，抽离公共逻辑也能够非常简单的使用自定义 Hook 来实现了。
3、如何创建高阶组件
1. 创建一个高阶组件函数，接收一个组件作为参数并返回一个新的组件。
2. 在高阶组件函数中，可以通过props将一些数据注入到组件中，或者通过创建一个新的组件将组件包裹在一个容器中。
3. 使用高阶组件时，将组件作为参数传递给高阶组件函数即可。返回的新组件会包含高阶组件提供的功能。
4、高阶组件的作用
- 高阶组件的主要作用是共享组件之间的通用逻辑，使代码更加可复用和可维护。通过将通用的逻辑抽离出来，可以避免代码重复和冗余，提高代码的可读性和可维护性。
5、总结
- React 高阶组件是一种用于复用组件逻辑的技术，它可以将组件的逻辑与视图分离，使得代码更加清晰和可维护。通过将组件作为参数传递给高阶组件，并返回一个新的组件，可以实现组件的复用和定制。高阶组件是React开发中常见的一种技术，可以帮助开发者实现一些常见的功能，提高开发效率。
- 附React中高阶组件的抽离方式
6、使用举例

// 子组件1
export default function ComChild1(props: { name: string }) {
  return <div>子组件1 name:{props.name}</div>;
}
// 子组件2
export default function ComChild2(props: { age: number }) {
  return <div>子组件2 age:{props.age}</div>;
}
// 高阶组件
export default function Hoc(Com) {
	// 高阶组件是一个函数 ，接收一个组件作为参数，返回一个新的组件
	return function NewCom(props) {
		useEffect(() => {
			console.log(`组件${Com.name}已经创建，创建时间${new Date().getTime()}`);
			return function () {
				console.log(`组件${Com.name}已经销毁，销毁时间${new Date().getTime()}`);
			};
		}, []);
    // 一般来讲，传入的组件作为新组件的视图
		return <Com {...props} />;
	};
}

// App
import { useState } from "react";
import ComChild1 from "./components/HOC/ComChild1";
import ComChild2 from "./components/HOC/ComChild2";
import Hoc from "./components/HOC/Hoc";
export default function App() {
  const [show1, setShow1] = useState(true)

// 使用高阶组件
  const NewChild1 = Hoc(ComChild1)
  const NewChild2 = Hoc(ComChild2)

  const toggleOnOff = () => {
    setShow1(!show1)
  }
  const child = show1 ? <NewChild1 name='abliy' /> : <NewChild2 age={159} />
  return (
    <div>
      <button onClick={toggleOnOff}>toggle</button>
      {child}
    </div>
  );
}

7、高阶组件的嵌套操作

高阶组件还可以进行嵌套操作，比如我有两段公共逻辑，但是这两段公共逻辑写在一个高阶组件中又不太合适，因此我们就可以拆分成两个高阶组件，例如我们新增一个 withTimer 的高阶组件：

import { useState, useEffect } from "react";

// 高阶组件是一个函数，接收一个组件作为参数
// 返回一个新的组件
function withTimer(Com) {
  // 返回的新组件
  return function NewCom(props) {
    // 抽离的公共逻辑
    const [counter, setCounter] = useState(1);

    useEffect(() => {
      const stopTimer = setInterval(() => {
        console.log(counter);
        setCounter(counter + 1);
      }, 1000);
      return function () {
        clearInterval(stopTimer);
      };
    });

    // 一般来讲，传入的组件会作为新组件的视图
    return <Com {...props} />;
  };
}

export default withTimer;

// 使用
const WrapChild1 = withTimer(Hoc(ChildCom1));
const WrapChild2 = withTimer(Hoc(ChildCom2));

8、关于Mixins
- ```
const mixinDefaultProps = {}
const ExampleComponent = React.createClasss({
  mixins: [mixinDefaultProps],
  render: function(){}
})
```
- 早期的 React 采用的是 mixins 来解决这种横切关注点相关的问题。Mixins 的原理可以简单理解为将一个 mixin 对象上的方法增加到组件上。
- mixins 只能在 React 的旧语法 React.createClasss 中使用，目前已经不再推荐使用了。
- mixins在使用过程中也存在很多的问题，例如：