一、什么是高阶组件
高阶组件其实就是一个函数，他会接收一个组件作为参数并返回一个经过改造后的组件
二、高阶组件的实现
1. 属性代理
属性代理是最常见的高阶组件实现方式，它实际上是使用组合的方式，通过将被包裹组件，包裹在容器组件中实现功能。
1.1 提取原始组件的state状态
function myHOC(WrappedComponent) {
return class PP extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ''
}
this.onNameChange = this.onNameChange.bind(this)
}
onNameChange(e) {
this.setState({
name: e.target.value
})
}
render() {
const newProps = {
value: this.state.name,
onChange: this.onNameChange
}
return
}
}
}
//使用方式如下
@myHOC
class Example extends React.Component {
render() {
//使用myHOC装饰器之后，组件的props被添加了value属性和onChange属性
return
}
}
1.2 获取原始组件的refs引用
通过属性代理实现高阶组件时，我们往往会发现这样一个问题：此时，通过ref，我们无法获取被高阶组件包装的原始组件，而是访问到的外层包裹的容器组件。
我们知道，ref属性可以设置回调函数，当组件被挂载后，该回调函数被立即执行，回调函数的参数为该组件的具体实例。在该回调函数中，可以立即使用组件，或者把它的引用保存起来供将来使用
那么为了处理高阶组件ref获取原始组件的问题，我们需要作如下的一层中转处理：
function myHOC(WrappedComponent) {
return class Mytest extends React.Component {
// 实现 HOC 不同的命名
static displayName = `HOC(${WrappedComponent.displayName})`;
/*获取被包裹的原始组件的实例*/
getWrappedInstance() {
return this.wrappedInstance;
}
// 这里的参数为被高阶组件包裹的原始组件的实例，在此将该实例存储起来
setWrappedInstance(ref) {
this.wrappedInstance = ref;
}
/*在组件被挂载后，会立即调用setWrappedInstance方法，参数为原始组件的具体实例*/
render() {
return
}
}
}
/*用高阶组件进行包裹处理*/
@myHOC
class Example extends React.Component {
static displayName = 'Example';
handleClick() { ... }
...
}
class App extends React.Component {
handleClick() {
/*这里this.refs.example获取到的是外层高阶组件，而不是被包裹的原始组件。因而可以调用高阶组件上的getWrappedInstance方法，获取到原始组件实例后，再调用其handleClick方法*/
this.refs.example.getWrappedInstance().handleClick();
}
render() {
return (
<div>
按钮
</div>
);
}
}
2. 反向继承
反向继承是使用一个函数接受一个组件作为参数传入，并返回了一个继承了该传入组件的类组件
const HOC = (WrappedComponent) => {
return class extends WrappedComponent {
render() {
return super.render();
}
}
}
相比于属性代理的方式，通过方向继承的方式实现高阶组件时。
1）可以直接拿到原始组件的state/refs
2）通过super.render()方法，可以对原始组件进行渲染劫持
3）可以对原始组件的生命周期进行劫持
对比：
属性代理，有利于从外部操作原始组件，可以操作的是props
反向继承，从继承的角度出发，可以从内部去操作原始组件，也就是操作原始组件内部的state，render，生命周期
三、高阶组件用途
1.抽取重复代码，实现组件复用
// HOC
import React from 'react';
const withFetchingHOC = (WrappedComponent, fetchingMethod, defaultProps) => {
return class extends React.Component {
async componentDidMount() {
const data = await fetchingMethod();
this.setState({
data,
});
}
render() {
return (
);
}
}
}
// views/PageA.js
import React from 'react';
import withFetchingHOC from '../hoc/withFetchingHOC';
import fetchMovieListByType from '../lib/utils';
import MovieList from '../components/MovieList';
const defaultProps = {emptyTips: '暂无喜剧'}
export default withFetchingHOC(MovieList, fetchMovieListByType('comedy'), defaultProps);
// views/PageB.js
import React from 'react';
import withFetchingHOC from '../hoc/withFetchingHOC';
import fetchMovieListByType from '../lib/utils';
import MovieList from '../components/MovieList';
const defaultProps = {emptyTips: '暂无动作片'}
export default withFetchingHOC(MovieList, fetchMovieListByType('action'), defaultProps);;
2.权限控制
对某个项目中的若干页面增加白名单功能，如果不在白名单中的用户访问这些页面时进行文案提示。
此时，高阶组件就很适合用在这里。既可以使鉴权代码不重复写在不同的页面逻辑中，而且也方便日后对其他页面增加或去除鉴权逻辑。
import React from 'react';
import { whiteListAuth } from '../lib/utils'; // 鉴权方法
/**
* 白名单权限校验
* @param WrappedComponent
* @returns {AuthWrappedComponent}
* @constructor
*/
function AuthWrapper(WrappedComponent) {
return class AuthWrappedComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
permissionDenied: -1,
};
}
async componentDidMount() {
try {
await whiteListAuth(); // 请求鉴权接口
this.setState({
permissionDenied: 0,
});
} catch (err) {
this.setState({
permissionDenied: 1,
});
}
}
render() {
if (this.state.permissionDenied === -1) {
return null; // 鉴权接口请求未完成
}else if (this.state.permissionDenied) {
return <div>功能即将上线，敬请期待~</div>;
}else{
return ;
}
}
}
}
export default AuthWrapper;
通过使用高阶组件，使得鉴权与业务完全解藕。只需要将需要加权限控制的页面组件作为参数传给高阶组件AuthWrapper即可
3.通过反向继承劫持原始组件的生命周期，进行一些渲染性能追踪
import React from 'react';
// Home 组件
class Home extends React.Component {
render () {
return (<h1>Hello World.</h1>);
}
}
// HOC
function withTiming (WrappedComponent: any) {
let start: number, end: number;
return class extends WrappedComponent {
constructor (props: any) {
super(props);
start = 0;
end = 0;
}
componentWillMount () {
if (super.componentWillMount) {
super.componentWillMount();
}
start = +Date.now();
}
componentDidMount () {
if (super.componentDidMount) {
super.componentDidMount();
}
end = +Date.now();
console.error(`${WrappedComponent.name} 组件渲染时间为 ${end - start} ms`);
}
render () {
return super.render();
}
};
}
export default withTiming(Home);
总结：合理的使用高阶组件可以增强代码的复用性和灵活性，提升开发效率。
网友评论