Share codes In React
mixins -> HOC -> Render Props
GO Back To 2015
import React from 'react'
import ReactDOM from 'react-dom'
const App = React.createClass({
getInitialState() {
return { x: 0, y: 0 }
},
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
})
},
render() {
const { x, y } = this.state
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
})
ReactDOM.render(<App/>, document.getElementById('app'))Mixins
- Using React.createClass
- Combined Mutiple Mixins Lifecycle
- You can share some codes!
import React from 'react'
import ReactDOM from 'react-dom'
const MouseMixin = {
getInitialState() {
return { x: 0, y: 0 }
},
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
})
}
}
const App = React.createClass({
mixins: [ MouseMixin ],
render() {
const { x, y } = this.state
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
})
ReactDOM.render(<App/>, document.getElementById('app'))ES6 Class do not support mixins
Mixins Problems
- React decide to use ES6 Class
- ES6 Class do not support mixins anymore
- State you do not know where come from
- State maybe overwritten by other mixins
HOC
High-Order Components
Come From Hign-order functions
- Takes one or more functions as arguments
- Returns a function as its result
Change to Hign-order Components
- Takes one or more component as arguments
- Returns a component as its result
const hoc1 = (Component) => {
return class extends React.Component {
constructor(props) {
super(props);
}
render() {
return <Component {...this.props} {...this.state} />
}
};
}const EnhancedComponent = ho1(Component);High-order components problems
- Props you do not know where come from
- Props maybe overwritten by other mixins
- Static Composition
