实操《深入浅出React和Redux》第一期

上次的书看得差不多了，但实践越来越麻烦。

于是重新开一本书，这次，人家用了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 = propTypesexport default Counter;