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

简介: 上次的书看得差不多了,但实践越来越麻烦。 于是重新开一本书,这次,人家用了create-react-app。

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

于是重新开一本书,这次,人家用了create-react-app。

实践方面就容易开展啦。:)


4f7613fea1dc8616a47af0d972546ed74b3b73f1

主要文件内容也少多啦。


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;

最终输出:
目录
相关文章
|
1月前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
33 0
|
5天前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
15 1
|
1月前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
31 3
|
1月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
1月前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
1月前
|
存储 JavaScript 前端开发
|
1月前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
33 1
|
3月前
|
存储 JavaScript 前端开发
React中使用redux
React中使用redux
136 56
|
1月前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
43 0