网站建设使用情况,免费微信公众号素材网,移动网站如何做权重,上海百度网络推广React 基础巩固(二十五)——高阶组件
高阶函数
定义#xff1a;接收一个或多个函数作为输入 或 输出一个函数 的函数JS 中常用的map、filter、reduce都是高阶函数
高阶组件#xff08;Higher-Order Components, HOC#xff09;
定义#xff1a;高阶组件是参数为函数接收一个或多个函数作为输入 或 输出一个函数 的函数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 (divh1hello world/h1/div);}
}const HelloWorldHOC hoc(HelloWorld);export class App extends PureComponent {render() {return (divHelloWorld /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 (h1Home: {props.name} - {props.level} - {props.age}/h1);
});const Profile enhanceUserInfo(function Profile(props) {return (h1Profile: {props.name} - {props.level}/h1);
});const Hello enhanceUserInfo(function Hello(props) {return (h1Hello: {props.name} - {props.level}/h1);
});export class App extends PureComponent {render() {return (divHome age{888} /Profile /Hello //div);}
}export default App;高阶组件的应用场景二—— 拦截并处理Context传参
构建 ThemeContext
import { createContext } from react;const ThemeContext createContext();export default ThemeContext;构建 App.jsx通过 ThemeContext.Provider 传递参数给Product/
import React, { PureComponent } from react;
import ThemeContext from ./context/theme_context;
import Product from ./Product;export class App extends PureComponent {render() {return (divThemeContext.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 (divProduct:ThemeContext.Consumer{(value) {return (h2theme: {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 (divProduct:{color} - {size}/div);}
}export default withTheme(Product);高阶组件的应用场景三—— 登陆鉴权
构建登陆鉴权高阶组件
function loginAuth(OriginComponent) {return (props) {// 从localStorage 中获取 tokenconst token localStorage.getItem(token);if (token) {return OriginComponent {...props} /;} else {return h2请先登陆/h2;}};
}export default loginAuth;
构建 APP.jsx
import React, { PureComponent } from react;
import Cart from ./Cart;export class App extends PureComponent {constructor() {super();this.state {isLogin: false,};}loginClick() {localStorage.setItem(token, test token value);this.setState({isLogin: true,});}render() {const { isLogin } this.state;return (divbutton onClick{(e) this.loginClick()}登录/buttonCart //div);}
}export default App;
构建Cart.jsx并用loginAuth包裹Cart进行鉴权处理
import React, { PureComponent } from react;
import loginAuth from ./login_auth;export class Cart extends PureComponent {render() {return (divh2Cart/h2/div);}
}export default loginAuth(Cart);
高阶组件的应用场景四—— 打印界面渲染时间
构建打印界面渲染时间高阶组件
import { PureComponent } from react;function logRenderTime(OriginComponent) {return class extends PureComponent {UNSAFE_componentWillMount() {this.beginTime new Date().getTime();}componentDidMount() {this.endTime new Date().getTime();const interval this.endTime - this.beginTime;console.log(当前页面${OriginComponent.name} 的渲染花费${interval} ms);}render() {return OriginComponent /;}};
}export default logRenderTime构建App.jsx
import React, { PureComponent } from react
import Detail from ./Detailexport class App extends PureComponent {render() {return (divDetail/Detail/div)}
}export default App
构建Detail.jsx并通过logRenderTime拦截Detail组件打印其界面渲染时间
import React, { PureComponent } from react;
import logRenderTime from ./log_render_time;export class Detail extends PureComponent {render() {return (divh2Detail Page/h2ulli数据列表1/lili数据列表2/lili数据列表3/lili数据列表4/lili数据列表5/lili数据列表6/lili数据列表7/lili数据列表8/lili数据列表9/lili数据列表10/li/ul/div);}
}export default logRenderTime(Detail);
