注:本篇文章仅供个人日后复习,所以没什么干货,只起类似“备忘录”的作用。
最近,在看《深入浅出React和Redux》,目前到第二章了,这是本章代码:
(1)counter.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const buttonStyle = {
margin: '10px'
};
class Counter extends Component {
constructor(props) {
console.log('enter constructor: ' + props.caption);
super(props);// 为了获得父组件传进来的prop
// bind()方法会创建一个新函数,称为绑定函数,
// 当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,
// 传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数
// 按照顺序作为原函数的参数来调用原函数
this.onClickIncrementButton = this.onClickIncrementButton.bind(this);
this.onClickDecrementButton = this.onClickDecrementButton.bind(this);
this.state = {
count: props.initValue||0
}
}
/*
// 在ES6中不会用到
getInitialState() {
console.log('enter getInitialState');
}
getDefaultProps() {
console.log('enter getDefaultProps');
}
*/
componentWillReceiveProps(nextProps) {
console.log('enter componentWillReceiveProps ' + this.props.caption)
}
componentWillMount() {
console.log('enter componentWillMount ' + this.props.caption);
}
componentDidMount() {
console.log('enter componentDidMount ' + this.props.caption);
}
onClickIncrementButton() {
//this.setState({count: this.state.count + 1});
this.updateCount(true);
}
onClickDecrementButton() {
//this.setState({count: this.state.count - 1});
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);
}
shouldComponentUpdate(nextProps, nextState) {
return (nextProps.caption !== this.props.caption) ||
(nextState.count !== this.state.count);
}
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.propTypes = {
caption: PropTypes.string.isRequired,
initValue: PropTypes.number,
onUpdate: PropTypes.func
};
Counter.defaultProps = {
initValue: 0,
onUpdate:f => f
};
export default Counter;
(2)controlPanel.js
import React, { Component } from 'react';
import Counter from './Counter.js';
// 这是组件离左右两边的margin
const style = {
margin: '20px'
};
class ControlPanel extends Component {
constructor(props){
super(props);
this.onCounterUpdate=this.onCounterUpdate.bind(this);
this.initValues=[0,10,20];
const initSum=this.initValues.reduce((a,b)=>a+b,0);
this.state={
sum:initSum
};
}
render() {
console.log('enter ControlPanel render');
return (
<div style={style}>
<Counter onUpdate={this.onCounterUpdate} caption="First"/>
<Counter onUpdate={this.onCounterUpdate} caption="Second" initValue={this.initValues[1]} />
<Counter onUpdate={this.onCounterUpdate} caption="Third" initValue={this.initValues[2]} />
<button onClick={ () => this.forceUpdate() }>
Click me to re-render!
</button>
<hr/>
<div>Total Count:{this.state.sum}</div>
</div>
);
}
onCounterUpdate(newValue,previousValue){
const valueChange=newValue-previousValue;
this.setState({sum:this.state.sum+valueChange});
}
}
// 输出这个模块
export default ControlPanel;
关于生命周期的问题,书中已经说得很好了,不再赘述。
代码中不同组件之间传数据的方法要掌握。例如这里是在counter中创建了一个空函数onUpdate,每次点击都会调用它,传入参数newValue和previousValue,然后在组件controlPanel的每个counter实例中,将onCounterUpdate绑定到这个prop上(也就相当于将参数传给了onCounterUpdate)。