上次的书看得差不多了,但实践越来越麻烦。
于是重新开一本书,这次,人家用了create-react-app。
实践方面就容易开展啦。:)
主要文件内容也少多啦。
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import ControlPanel from './ControlPanel';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<ControlPanel />, document.getElementById('root'));
registerServiceWorker();
ControlPanel.js
import React, { Component } from 'react';
import Counter from './Counter';
const style = {
margin: '20px'
};
class ControlPanel extends Component {
constructor(props){
super(props);
this.onCounterUpdate = this.onCounterUpdate.bind(this);
this.initValue = [0, 10, 20];
const initSum = this.initValue.reduce((a, b) => a+b, 0);
this.state = {
sum: initSum
};
}
onCounterUpdate(newValue, previousValue) {
const valueChange = newValue - previousValue;
this.setState({sum: this.state.sum + valueChange});
}
render() {
console.log("enter ControlPanel render");
return (
<div style={style}>
<Counter onUpdate={this.onCounterUpdate} caption="First" />
<Counter onUpdate={this.onCounterUpdate} caption="Second" initValue = {10} />
<Counter onUpdate={this.onCounterUpdate} caption="Third" initValue = {20} />
<button onClick={ ()=> this.forceUpdate() }>
Click me to re-render!
</button>
<hr />
<div> Total Count: {this.state.sum}</div>
</div>
);
}
}
export default ControlPanel;
Counter.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const buttonStyle = {
margin: '10px'
};
const propTypes = {
caption: PropTypes.string.isRequired,
initValue: PropTypes.number,
onUpdate: PropTypes.func
};
class Counter extends Component {
constructor(props) {
super(props);
console.log("enter constructor: " + props.caption);
this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
this.onClickDecrementButton = this.onClickDecrementButton.bind(this);
this.state = {
count: props.initValue
}
}
onClickIncrementButton() {
this.updateCount(true);
}
onClickDecrementButton() {
this.updateCount(false);
}
updateCount(isIncrement) {
const previousValue = this.state.count;
const newValue = isIncrement?previousValue + 1:previousValue -1;
this.setState({count: newValue});
this.props.onUpdate(newValue, previousValue);
}
render() {
console.log("enter render " + this.props.caption);
const {caption} = this.props;
return (
<div>
<button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>
<button style={buttonStyle} onClick={this.onClickDecrementButton}>-</button>
<span> { caption } count: {this.state.count}</span>
</div>
);
}
}
Counter.defaultProps = {
initValue: 0,
onUpdate: f => f
};
Counter.propTypes = propTypes
export default Counter;
最终输出: