[React] Higher Order Components (replaces Mixins)

Higher order components will allow you to apply behaviors to multiple React components.

So the idea is to create a high order component, then use this hight order component to create multi same behaivor component.

So high order function is insdie function return another function, the same, high order component is inside component return another component.

let Mixin = InnerComponent => class extends React.Component {
constructor(){
super();
this.state = {val: }
}
update(){
this.setState({val: this.state.val + })
}
componentWillMount(){
console.log('will mount')
}
render(){
return <InnerComponent
update={this.update.bind(this)}
{...this.state}
{...this.props} />
}
componentDidMount(){
console.log('mounted')
}
}

Inside the Mixin Component, we define the behavior "update" which will be shared to the mixined components.

Define two component:

const Button = (props) => <button
onClick={props.update}>
{props.txt} - {props.val}
</button> const Label = (props) => <label
onMouseMove={props.update}>
{props.txt} - {props.val}
</label>

Mixin those two component with Mixin:

let ButtonMixed = Mixin(Button)
let LabelMixed = Mixin(Label)

Use it:

class App extends React.Component {

  render(){
return (
<div>
<ButtonMixed txt="Button" />
<LabelMixed txt="Label" />
</div>
);
} } ReactDOM.render(<App />, document.getElementById('app'));

-----

let Mixin = InnerComponent => class extends React.Component {
constructor(){
super();
this.state = {val: }
}
update(){
this.setState({val: this.state.val + })
}
componentWillMount(){
console.log('will mount')
}
render(){
return <InnerComponent
update={this.update.bind(this)}
{...this.state}
{...this.props} />
}
componentDidMount(){
console.log('mounted')
}
} const Button = (props) => <button
onClick={props.update}>
{props.txt} - {props.val}
</button> const Label = (props) => <label
onMouseMove={props.update}>
{props.txt} - {props.val}
</label> let ButtonMixed = Mixin(Button)
let LabelMixed = Mixin(Label) class App extends React.Component { render(){
return (
<div>
<ButtonMixed txt="Button" />
<LabelMixed txt="Label" />
</div>
);
} } ReactDOM.render(<App />, document.getElementById('app'));
上一篇:NGUI 多场景情况下 管理多个界面


下一篇:java的异常总结