前言
React高阶组件（Higher-Order Components，HOCs）是一种强大的模式，用于在React应用中复用组件逻辑。它们可以用于各种应用场景，包括但不限于以下几个：
代码复用：HOCs允许你将通用的组件逻辑抽取出来，以便在多个组件之间共享。这样可以减少重复代码的数量，提高代码的可维护性。
状态管理：你可以使用HOCs来处理全局状态管理或组件之间的状态逻辑。例如，使用Redux或Mobx管理应用的状态，然后将状态注入到组件中。
权限控制：HOCs可以用于控制组件的访问权限。你可以创建一个HOC，检查用户是否有足够的权限来查看特定的组件或页面。
数据获取：HOCs可以用于处理数据的获取和传递。你可以创建一个HOC，负责从API或其他数据源获取数据，并将数据传递给包装的组件。
性能优化：HOCs还可以用于性能优化。通过将常用的逻辑提取到HOC中，可以避免不必要的渲染或数据获取，提高应用程序的性能。
日志和错误处理：你可以使用HOCs来添加日志记录或错误处理逻辑，以便更轻松地调试和监视应用程序。
下面将介绍几个常用的
代码复用
import React from 'react'; const UserContext = React.createContext({}); const {Provider, Consumer} = UserContext; class Son1 extends React.PureComponent { render() { return ( <div> <p>{this.props.name}</p> <p>{this.props.age}</p> </div> ) } } class Son2 extends React.PureComponent { render() { return ( <ul> <li>{this.props.name}</li> <li>{this.props.age}</li> </ul> ) } } const Father1 = EnhancedComponent(Son1); const Father2 = EnhancedComponent(Son2); class App extends React.PureComponent { constructor(props) { super(props); } render() { return ( <Provider value={{name: 'yangbuyiya', age: 18}}> <Father1/> <Father2/> </Provider> ) } } function EnhancedComponent(WrappedComponent) { class component extends React.PureComponent { render() { return ( <Consumer>{ value => { return ( <WrappedComponent name={value.name} age={value.age}/> ) } }</Consumer> ) } } return component; } export default App;
增强 Props
import React from 'react'; const UserContext = React.createContext({}); const {Provider, Consumer} = UserContext; class Son1 extends React.PureComponent { render() { return ( <div> <p>{this.props.name}</p> <p>{this.props.age}</p> <p>{this.props.country}</p> </div> ) } } class Son2 extends React.PureComponent { render() { return ( <ul> <li>{this.props.name}</li> <li>{this.props.age}</li> <li>{this.props.country}</li> </ul> ) } } function EnhancedComponent(WrappedComponent) { return class Component extends React.PureComponent { render() { return ( <Consumer>{ value => { return ( <WrappedComponent {...value} {...this.props}/> ) } }</Consumer> ) } } } const Father1 = EnhancedComponent(Son1); const Father2 = EnhancedComponent(Son2); class App extends React.PureComponent { render() { return ( <Provider value={{name: 'zs', age: 18}}> <Father1 country={'中国'}/> <Father2 country={'俄罗斯'}/> </Provider> ) } } export default App;
抽离 State / 生命周期拦截
import React from 'react'; import {EventEmitter} from 'events'; const UserContext = React.createContext({}); const {Provider, Consumer} = UserContext; const eventBus = new EventEmitter(); class Son1 extends React.PureComponent { render() { return ( <div> <p>{this.props.name}</p> <p>{this.props.age}</p> <p>{this.props.country}</p> { this.props.list.map(name => { return <p key={name}>{name}</p> }) } </div> ) } } class Son2 extends React.PureComponent { render() { return ( <ul> <li>{this.props.name}</li> <li>{this.props.age}</li> <li>{this.props.country}</li> { this.props.list.map(name => { return <li key={name}>{name}</li> }) } </ul> ) } } function EnhancedComponent(WrappedComponent) { return class Component extends React.PureComponent { constructor(props) { super(props); this.state = { list: [] } } componentDidMount() { eventBus.addListener('update', this.update.bind(this)); } componentWillUnmount() { eventBus.removeListener('update', this.update.bind(this)); } update(list) { this.setState({ list: list }); } render() { return ( <Consumer>{ value => { return ( <WrappedComponent {...value} {...this.props} {...this.state}/> ) } }</Consumer> ) } } } const Father1 = EnhancedComponent(Son1); const Father2 = EnhancedComponent(Son2); class App extends React.PureComponent { render() { return ( <Provider value={{name: 'zs', age: 18}}> <Father1 country={'中国'}/> <Father2 country={'俄罗斯'}/> <button onClick={() => { this.btnClick() }}>按钮 </button> </Provider> ) } btnClick() { eventBus.emit('update', ['鲁班', '虞姬', '黄忠']); } } export default App;
权限控制
import React from 'react'; class Info extends React.PureComponent { render() { return ( <div>用户信息</div> ) } } class Login extends React.PureComponent { render() { return ( <div>用户登录</div> ) } } function EnhancedComponent(WrappedComponent) { return class Authority extends React.PureComponent { render() { if (this.props.isLogin) { return <WrappedComponent/> } else { return <Login/> } } } } const AuthorityInfo = EnhancedComponent(Info); class App extends React.PureComponent { render() { return ( <AuthorityInfo isLogin={false}/> ) } } export default App;
官方文档
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
