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

天飞 2017-12-03 15:28:47 浏览23 评论0

react LOG redux Render BIND props states

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

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

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


最终输出： 版权声明：本文内容由互联网用户自发贡献，本社区不拥有所有权，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：yqgroup@service.aliyun.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

用云栖社区APP，舒服~

【云栖快讯】2017互联网超级工程阿里双11完美落幕，交易额突破1682亿，但阿里工程师如何玩转“超级工程”，背后黑科技又是如何？12月13-14日，12位大咖直播分享揭秘1682亿背后技术实践，马上预约  详情请点击 评论文章 (0) (0) (0)

相关文章

网友评论