如何用React高阶组件打造一个智能面包屑导航系统？

本文共计2210个文字，预计阅读时间需要9分钟。

React 高阶组件是利用 React 的组合特性，通过包装一个组件以返回一个新的组件，这种新的组件能够重用逻辑而非重用代码。简而言之，高阶组件就是一个函数，它接收一个组件作为参数，并返回一个新的组件。

例如，在 React 路由（react-router）中，`Route` 组件就是一个高阶组件，它接收路由配置并返回一个渲染特定组件的条件渲染组件。

什么是 React 高阶组件

React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件，并返回处理完成后的 React 组件。React 高阶组件在 React 生态中使用的非常频繁，比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的。

使用 React 高阶组件的好处

在工作中，我们经常会有很多功能相似，组件代码重复的页面需求，通常我们可以通过完全复制一遍代码的方式实现功能，但是这样页面的维护可维护性就会变得极差，需要对每一个页面里的相同组件去做更改。