0
点赞
收藏
分享

微信扫一扫

React-高阶组件-应用场景

代码复用

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: 'BNTang', 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;

官方文档

  • ​​https://zh-hans.reactjs.org/docs/higher-order-components.html#gatsby-focus-wrapper​​




举报

相关推荐

0 条评论