高阶组件:本质是一个函数,返回值是一个组件,函数的参数是原生组件,主要是对组件的代码的复用或者是逻辑上的复用,
以及对原始组件上的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 >
)
}