React高阶组件
一、高阶函数
在了解高阶组件之前首先了解一下高阶函数
高阶函数有两个特点：
函数可以作为参数被传递
setTimeout(() => {
console.log(123);
}, 1000);
函数可以作为返回值被输出
function foo(x) {
return function() {
return x;
}
}
看完上面两个例子就明白了什么叫高阶函数了。实际上高阶函数的应用场景很多，像setTimeout、setInterval这样的时间函数，我们熟悉的操作数组的一些方法（map、some、filter）等也是高阶函数。
二、高阶组件（High Order Component，HOC）
高阶组件就是接收一个组件作为参数并返回一个新组件的函数。
注：高阶组件是一个函数，并不是一个组件
三、高阶组件的实现
例子
image.png
上面的图片有两个组件，可以看到它们除了白色内容区域不同之外，别的部分都是相同的，这时我们可以使用高阶组件来实现它。
步骤：
React 项目目录结构如下：
image.png
components 文件夹放置我们的组件
A.js
import React, { Component } from 'react';
export default class A extends Component {
render() {
return (
头部
)
}
}
把 A 组件挂载到页面上，App.js
import React from 'react';
import A from './components/A';
import './index.css';
class App extends React.Component {
render() {
return(
)
}
}
export default App;
启动项目后页面的效果：
image.png
可以看到现在的效果离我们想要的效果不远了，我们只需要将 A 组件改写成一个函数就能实现我们所要的高阶组件了。
改写后的A.js
import React, { Component } from 'react';
// hocA函数接收一个组件参数
function hocA(Wrapper) {
return class A extends Component {
render() {
return (
头部
)
}
}
};
export default hocA;
那么现在组件 A 就是一个高阶组件了，那么怎么使用呢，很简单
B.js
import React, { Component } from 'react';
// 引入该高阶组件
import hocA from './A';
class B extends Component {
render() {
return (
{/* 将组件挂载到相应的位置即可 */}
这是B组件
)
}
}
// 将组件作为参数传入高阶组件即可
export default hocA(B);
同理，C.js也是这么改写。改写完后将 B、C 组件挂载到页面上
App.js
import React from 'react';
import B from './components/B';
import C from './components/C';
import './index.css';
class App extends React.Component {
render() {
return(
这是B组件
)
}
}
// 直接导出该组件
export default B;
同理 C.js 也是这么修改。重新启动项目，效果和之前一样。
至此一个简单的高阶组件便实现了。那么我们为什么需要高阶组件，原因就是当多个组件都需要某个相同的功能，使用高阶组件可以减少重复实现。
发表评论 (审核通过后显示评论)：