关于高阶组件

• 拖延已久的高阶组件（函数组件）实现

  1. 何时使用：当有公共数据需要获取，且多处获取时，你可能需要它。

  2. 作用：解耦，降低耦合度。

  3. 实现方式：

     • 创建一个处理公共逻辑的高阶组件commonGaojie.tsx

     /*
      * @Author: jiaojiaofang
      * @Date: 2022-10-13 16:00:20
      * @LastEditors: jiaojiaofang
      * @LastEditTime: 2022-10-13 16:11:55
      */
     import React, { Component, useState } from "react";
     
     const CommonGaojie = (ComChild: any) => {
       const newChild = () => {
         const [name, setName] = useState("11");
         // 此处可以写逻辑改变name的值，可以通过输入框或其他操作执行该方法，即可实时修改到name，传回父组件
         const changeName =() => {
             setName('22');
         }
         return <ComChild gaojiename={name} />;
       };
       return newChild;
     };
     
     export default CommonGaojie;
     

     • 在需要公共处理逻辑的组件使用（如需要处理name字段）

     import React, { useState } from "react";
     import { Button, Row, Col } from "antd";
     import CommonGaojie from "../../../components/commonGaojie";
     
     const Test = (props: any) => {
       const { gaojiename } = props;
       return (
         <Row>
           <Col span={24}>{gaojiename}</Col>
         </Row>
       );
     };
     
     export default CommonGaojie(Test);
     

     • 效果展示

     

• 讲讲hooks
  1. 常用hooks（useState，useRef，useCaallBack，useContext，useMemo，useEffect等）
  2. 为啥推荐hooks写法，简单来说就俩字：简单
• 讲讲函数式组件和类组件（clas组件）
  1. 函数组件（上面两个tsx文件都是函数式组件，不再举栗子了）
  2. 类组件

export default class InteractCat extends Component {
    static aa = aa
    constructor() {
        super()
        this.state = {
            b: false
        }
    }
    render() {
        return(
            <View>类组件demo</View>
        )
    }
}

• 使用背景：react版本>=16.8
• 希望我们的代码都越来越简单，好看，整齐！！！但是不要越来越卷！！！！！