React 基础巩固(二十五)——高阶组件

高阶函数

• 定义：接收一个或多个函数作为输入 或 输出一个函数 的函数
• JS 中常用的map、filter、reduce都是高阶函数

高阶组件（Higher-Order Components, HOC）

• 定义：高阶组件是参数为函数，返回值为新组件的函数
• 高阶组件本质是函数
• 高阶组件并不是 React API 的一部分，它是基于 React 的组合特性而形成的设计模式

import React, { PureComponent } from "react";// 定义一个高阶组件
function hoc(Cpn) {// 1.定义一个类组件class NewCpn1 extends PureComponent {render() {return <Cpn />;}}return NewCpn1;// 2.定义一个函数组件function NewCpn2(props) {}return NewCpn2;
}class HelloWorld extends PureComponent {render() {return (<div><h1>hello world</h1></div>);}
}const HelloWorldHOC = hoc(HelloWorld);export class App extends PureComponent {render() {return (<div><HelloWorld /><HelloWorldHOC /></div>);}
}export default App;

高阶组件的应用场景（一）

• 构建用户信息增强高阶组件

import React, { PureComponent } from "react";
// 定义组件： 给一些需要特殊数据的组件注入props
function enhanceUserInfo(OriginCmp) {class NewComponent extends PureComponent {constructor() {super();this.state = {userInfo: {name: "outman",level: 123,},};}render() {return <OriginCmp {...this.props} {...this.state.userInfo} />;}}return NewComponent;
}export default enhanceUserInfo;

• 使用高阶组件拦截组件并注入用户信息

import React, { PureComponent } from "react";
import enhanceUserInfo from "./enhance_props";const Home = enhanceUserInfo(function Home(props) {return (<h1>Home: {props.name} - {props.level} - {props.age}</h1>);
});const Profile = enhanceUserInfo(function Profile(props) {return (<h1>Profile: {props.name} - {props.level}</h1>);
});const Hello = enhanceUserInfo(function Hello(props) {return (<h1>Hello: {props.name} - {props.level}</h1>);
});export class App extends PureComponent {render() {return (<div><Home age={"888"} /><Profile /><Hello /></div>);}
}export default App;

高阶组件的应用场景（二）

• 构建 ThemeContext

import { createContext } from "react";const ThemeContext = createContext();export default ThemeContext;

• 构建 App.jsx，通过 ThemeContext.Provider 传递参数给

import React, { PureComponent } from "react";
import ThemeContext from "./context/theme_context";
import Product from "./Product";export class App extends PureComponent {render() {return (<div><ThemeContext.Provider value={{ color: "red", size: 18 }}><Product /></ThemeContext.Provider></div>);}
}export default App;

• 构建 Product.jsx, 在 Product 中，通过 ThemeContext.Consumer 消费参数

import React, { PureComponent } from "react";
import ThemeContext from "./context/theme_context";// 直接使用上下文方式传递props参数
export class Product extends PureComponent {render() {return (<div>Product:<ThemeContext.Consumer>{(value) => {return (<h2>theme: {value.color} - {value.size}</h2>);}}</ThemeContext.Consumer></div>);}
}export default Product;

• 若每次都要采用上述方式，通过ThemeContext.Consumer消费参数，太过繁琐。故，可以利用高阶组件进行处理。
• 构建高阶组件 with_theme

import ThemeContext from "./theme_context";function withTheme(OriginComponent) {return (props) => {return (<ThemeContext.Consumer>{(value) => {return <OriginComponent {...value} {...props} />;}}</ThemeContext.Consumer>);};
}export default withTheme;

• 通过withTheme包装Product

import React, { PureComponent } from "react";
import withTheme from "./context/with_theme";// 利用高阶函数方式,更简洁
export class Product extends PureComponent {render() {const { color, size } = this.props;return (<div>Product:{color} - {size}</div>);}
}export default withTheme(Product);