react高阶组件和Hooks语法

高阶组件：本质是一个函数，返回值是一个组件，函数的参数是原生组件，主要是对组件的代码的复用或者是逻辑上的复用，
以及对原始组件上的props和state进行增删改查的操作，也可以对原生组件的进行增强和优化;

高阶组件大致分为两种：

1.主要操作的是props对象和组件的增强

import React, { Component } from 'react';

function MyHoc(OldCom) {
    return class NewCom extends Component {
        constructor(props) {
            super(props);
            this.state = {
                height: 170
            }
        }
        render() {
            console.log(this.state, this.props);
            this.newPorps = {   //创建一个新的props传递到old组件
                ...this.props,
                happly: "睡觉",
                sex: "男",
                height: this.state.height
            }
            // delete  删除传递属性;
            delete this.newPorps.age;
            // 修改
            this.newPorps.sex = "女";
            
            return (
                <div>
                    <div>我是高阶组件</div>  //可以额外加入新的组件与元素
                    {/* 用绑定语法写成对象展开符 */}
                    <OldCom {...this.newPorps} ></OldCom>  //将新的props传递到oldCom中;
                </div>
            );
        }
    }

}
export default MyHoc;

2 反向继承；
在高阶组件实现新组件新建继承与原始组件,主要是对原始组件的state进行操作,页面增强优化;

function MyHoc2(OldCom) {
    // 反向继承
    return class NewCom extends OldCom {
        // 反向继承对原始组件的state进行操作,进行修改的时候,在componentDidMount生命周期进行修改;
        // 重写父类生命周期函数;
        componentDidMount() {
            this.setState({
                name: "hello"
            })
        }
        render() {
            console.log(super.console1());
            // 渲染劫持:可以通过高阶组件对原始组件的状态和页面模板重新渲染,如果不想渲染一个新的组件,可以直接 return null 不进行渲染, 渲染劫持一般使用在
            // 需要判断的场景,
            var isLogin = true;
            if (isLogin) {
                // 直接渲染父组件;调用super.render函数进行渲染父组件;
                return super.render()
            } else {
                // 渲染登陆页面
                return null
            }
        }
    }

}

export default MyHoc2;

Hooks语法

主要是为了函数式组件提供生命周期和组件状态;通过useState,模拟状态useEffect模拟生命周期函数;

import React, { useState, useEffect } from 'react';

// hooks:主要是为了函数式组件提供生命周期和组件状态;通过useState,模拟状态useEffect模拟生命周期函数; 

export default function User() {
    console.log(this);  //函数是一个纯函数,为了this指向避免recat指向的问题才会用函数式组件;
    const [name, setName] = useState("宫本武藏"); //name 就是状态名,返回的是一个数组 参数一状态的初始值,第二个参数可以不穿;
    const [age, setAge] = useState(200);
    let a = 3;

    // 通过useEffect() 模拟生命周期函数,
    // 参数一是一个回调函数 参数二 不传;
    useEffect(() => {
        console.log("组件初始化的时候调用,或者有任何状态更新的时候调用didmout/updated");
    })
    //情况2 参数1 :回调函数, 参数二 空数组;
    useEffect(() => {
        console.log("组件初始化的时候调用一次,模拟/didmount生命周期");
    }, [])
    // 情况三 参数一回调,参数二 指定数据更新的时候触发[name];
    useEffect(() => {
        console.log("组件初始化的时候调用一次,只有name状态发生改变的时候触发该函数");
    }, [name])

    return (
        <div>
            {a}
            <p>name:{name}</p>
            <p>age:{age}</p>
            <button onClick={() => setName(a++)}>点击报错</button>
            <button onClick={() => setAge(a++)}>asdf</button>
        </div >
    )
}