什么是高阶组件？
高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。
高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件， 因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。
所以你可能会发现，当高阶组件中返回的组件是 无状态组件（Stateless Component） 时，该高阶组件其实就是一个 高阶函数，因为 无状态组件 本身就是一个纯函数。
无状态组件也称函数式组件。
高阶组件的基本使用
高阶组件内部定义一个类组件或者函数组件作为返回结果例如：
定义类组件返回
// 定义一个高阶组件 // 1.高阶组件会接收一个组件作为参数 function hoc(Cpn) { class NewCpn extends PureComponent { } // 2.并且返回一个新的组件 return NewCpn }
定义函数组件返回
// 定义一个高阶组件 // 1.高阶组件会接收一个组件作为参数 function hoc(Cpn) { function NewCpn() { } // 2.并且返回一个新的组件 return NewCpn }
高阶组件使用过程
import React, { Component } from 'react' // 创建一个高阶组件 function hoc(Cpn) { function NewCpn() { return ( <div> <Cpn /> </div> ) } return NewCpn } // 创建一个组件作为参数 class HelloWorld extends Component { render() { return <h2>Hello World</h2> } } // 调用高阶组件会返回一个新的组件 const HelloWorldHOC = hoc(HelloWorld) export default function App() { return ( <div> <HelloWorldHOC></HelloWorldHOC> </div> ) }
高阶组件应用场景
应用一: props增强
例如我们可以定义一个高阶组件, 对传入的组件进行props增强, 也就是为传入的组件添加一些参数, 需要注意的是, 如果传入的组件本身也有传递参数的话, 我们在为组件注入要增强的参数的同时, 还需要将本身传递的参数也注入进来, 实例代码如下:
import React, { Component } from 'react' // 定义一个高阶组件, 对传入的组件进行props增强 function enhancedProps(WrapperCpn) { class NewComponent extends Component { constructor() { super() this.state = { userInfo: { name: "小红", age: 18 } } } render() { // 如果组件本身也有传递参数, 也需要将参数添加进来 return <WrapperCpn {...this.props} {...this.state.userInfo} /> } } return NewComponent } // 调用高阶组件, 对组件进行props增强 const Home = enhancedProps(function (props) { console.log(props);//{name: '小红', age: 18} return <h2>{props.name}-{props.age}</h2> }) const About = enhancedProps(function (props) { console.log(props);//{names: 'zjx', name: '小红', age: 18} return <h2>{props.name}-{props.age}-{props.names}</h2> }) export default function App() { return ( <div> <Home></Home> <About names={"zjx"}></About> </div> ) }
应用二: 渲染判定鉴权
一些页面是必须用户登录成功才能进行进入; 如果用户没有进行登录，那么直接跳转到登录页面;
import React, { Component } from 'react' // 定义一个高阶组件, 对传入的组件进行props增强 // 定义一个高阶组件, 用于鉴权的操作 function loginAuth(WrapperCpn) { return props => { // 从本地存储中获取token, token有值表示已登录, 没有值表示未登录 const token = localStorage.getItem("token") if (token) { return <WrapperCpn {...props} /> } else { return <h2>请先登录, 再跳转到对应的页面中</h2> } } } const Cart = loginAuth(function () { return <h2>购物车页面</h2> }) export default function App() { return ( <div> <Cart></Cart> </div> ) }
