// Child component that takes a numeric ID (for ease of tracking).
// Render a simple button having the supplied ID as a label.
// Log to the console when it's mounted and unmounted from the DOM.
class Child extends React.Component {
componentDidMount () {
console.log('Child ' + this.props.id + ' has been mounted')
}
componentWillUnmount() {
console.log('Child ' + this.props.id + ' has been unmounted')
}
render() {
const {id, x, y} = this.props;
const style = {
transform: `translateX(${x}px) translateY(${y}px)`,
}
return (
<div className='btn btn-default' style={style}>{this.props.id}</div>
)
}
}
Child.propTypes = {
id: React.PropTypes.number,
x: React.PropTypes.number,
y: React.PropTypes.number,
}
// View1 and View2 React functional components. Theyare identical from a markup standpoint.
// The point of having separate functions is to test out the mounting/unmounting behavior
// of React.
// `View1` and `View2` are capitalized so that React knows that they are
// user-defined components instead of built-in components.
function View1() {
return (
<div>
<Child id={1} key='child-1' x={20} y={0}/>
<Child id={2} key='child-2' x={200} y={0}/>
</div>
)
}
function View2() {
return (
<div>
<Child id={1} key='child-1' x={60} y ={0}/>
<Child id={2} key='child-2' x={120} y={0}/>
</div>
)
}
// A very simple Container that will first show view 1, then wait for one second and switch to view 2.
// It also logs out useful lifecycle messages.
class Container extends React.Component {
constructor() {
super()
this.state = {
viewIndex: 1
}
}
componentDidMount() {
console.log('Container mounted')
console.log('Will change viewIndex to 2 in one second.')
setTimeout(() => {
this.setState({viewIndex: 2})
}, 1000)
}
componentDidUpdate() {
console.log("Container's state has been updated to " + this.state.viewIndex + " and finished re-render.")
}
render() {
const {viewIndex} = this.state;
if (viewIndex === 1) {
return <View1 key='view'/>
} else {
return <View2 key='view'/>
}
}
}
ReactDOM.render(<Container/>, document.getElementById('container'))
View Compiled