高阶组件具体用法和使用场景
Posted 兰村_web
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高阶组件具体用法和使用场景相关的知识,希望对你有一定的参考价值。
1.什么是高阶组件
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。
具体而言,高阶组件是参数为组件,返回值为新组件的函数。
2.例子
高阶组件
import React from 'react';
export default function HocHour(Com) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
hour: 0,
};
}
componentDidMount() {
const p = new Promise(this.getFirstHour);
let num = 0;
p.then(res => {
num += res;
return new Promise(this.getSecondHour);
}).then(res => {
num += res;
this.setState({ hour: num })
})
}
getFirstHour = (resolve, reject) => {
setTimeout(() => {
resolve(3);
}, 1000);
}
getSecondHour = (resolve, reject) => {
setTimeout(() => {
resolve(5);
}, 1000);
}
render() {
return <Com {...this.state} />
}
}
}
class组件
import React, { Component } from 'react';
import HocHover from './components/HocHour';
class Index extends Component {
constructor(props) {
super(props);
this.state = {
number1: 1,
number2: 2,
}
}
componentDidMount() {
}
render() {
const { hour } = this.props;
const { number1, number2 } = this.state;
return <div style={{ padding: '20px' }}>
<div>{hour}</div>
<div>{hour + number1}</div>
<div>{hour + number2}</div>
</div>
}
}
export default HocHover(Index);
上面的例子是 在HocHover高阶组件中通过setTimeout模拟接口调用得到的hour值,在Index组件中各个地方使用到。最终在页面两秒后显示如下图:
总结
千山万水总有情,点赞再走行不行!
以上是关于高阶组件具体用法和使用场景的主要内容,如果未能解决你的问题,请参考以下文章