React组件的数据

React组件的数据分两种，prop和state，prop或state的改变都会引发组件的重新渲染。prop是组件的对外接口，state是组件的内部状态，对外用prop，对内用state。

React的prop

当外部世界要传递数据给React组件，最直接的方式就是通过prop;同样，React组件要反馈数据给外部，也可以通过prop。prop的类型不限于纯数据，也可以是函数，函数类型的prop等于父组件传递给子组件一个回调函数，子组件可以对这个回调函数传参，这样就可以把信息传给外部世界。

// ./lesson2/chapter1/ControlPanel.js

class ControlPanel extends Component {
    constructor() {
        super(...arguments);
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(name) {
        alert(name)
    }
    render() {
        console.log('enter ControlPanel render');
        return (
            <div style={style}>
                <Counter caption="First" handleClick={this.handleClick}/>
            </div>
        );
    }
}

//  ./lesson2/chapter1/Counter.js

class Counter extends Component {
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.props.handleClick('点我啊');
    }
    render() {
        const {caption} = this.props;   //  ES6对象结构的写法
        return (
            <div>
                <button onClick={this.handleClick}>+</button>
                <span>caption:{caption}</span>
            </div>
        );
    }
}

读取prop值

从上面例子可以看到ControlPanel.js中组件Counter传递一个叫作caption的prop，其值为First，又传递了一个叫作handleClick的prop，其值是一个函数。在Counter.js中，通过this.props.caption即可获得caption的值。在Counter组件中，我们给一个button绑定点击事件，调用从父组件传递过来的handleClick函数，并传递一个参数给父组件。

先回顾一下，在ES6的课程中，关于CLASS的super我们说过以下几点：

• super()方法可访问基类的构造函数
• super()只可在派生类的构造函数中调用
• super()负责初始化this,在构造函数中访问this前要调用super()

在Counter组件中，我们可以看到：一个组件需要定义自己的构造函数，需要在第一行调用super(props) [constructor中可能还会传入其他参数，也可这样写super(...arguments)];给super()传入props作为参数，则可在构造函数中访问this.props。在构造函数中还给成员函数绑定了当前this的执行环境，ES6方法创造的React组件类并不会自动给我们绑定this到当前对象。

propTypes检查

既然prop是组件的对外接口，那么就应该有某种方式让组件申明自己的接口规范。ES6定义的组件类中，可以通过增加类的propTypes属性来定义prop规格。

比如，对Counter组件的propTypes定义如下代码：

Counter.propTypes = {
    caption: PropTypes.string.isRequired,
    initValue: PropTypes.number
}

其中要求caption必须是string类型，initValue必须是number，并且caption的值还是必须存在的。为了验证，可将ControlPanel.js中的render函数增加如下代码

<Counter caption={123}/>

控制台中可以看到一个红色的提示警告。

propTypes虽然能够在开发阶段发现代码问题，但在产品环境中并不需要。因为propTypes检查也是要消耗CPU计算资源的。所以最好的方式是，开发环境定义propTypes，生产环境通过babel-react-optimize优化去掉propTypes。关于propTypes具体用法请参见官方文档。

React中的state

驱动组件渲染过程的除了prop，还有state，state代表组件的内部状态。由于React不能修改传入的prop，所以只能通过修改state来记录自身数据的变化。

// ./lesson2/chapter2/Counter.js
class Counter extends Component {
    constructor(props) {
        ... ...
        this.state = {
            count: props.initValue
        }
    }

    onClickIncrementButton() {
        this.setState({count: this.state.count + 1});
    }

    onClickDecrementButton() {
        this.setState({count: this.state.count - 1});
    }

    render() {
        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
};

export default Counter;

初始化state

在Counter组件中，我们通过this.state完成对组件state的初始化，代码如下：

constructor(props) {
    ... ...
    this.state = {
        count: props.initValue || 0
    }
}

组件的state必须是一个javascript对象。通常情况，我们不会通过state设置初始值，而是通过React的defaultProps的功能。

constructor(props) {
    ... ...
    this.state = {
        count: props.initValue
    }
}

Counter.defaultProps = {
    initValue: 0
};

读取和更新state

在button上绑定点击事件，通过触发点击的回调函数来改变state值。代码如下：

onClickIncrementButton() {
    this.setState({count: this.state.count + 1});
}


<button style={buttonStyle} onClick={this.onClickIncrementButton}>+</button>

Tips: 改变state必须通过this.setState()，直接去修改this.state并不会让页面重新渲染。 直接修改this.state的值，虽然改变了组件的内部状态，但只是野蛮的修改state，却没有驱动组件进行重新渲染，既然组件没有重新渲染，当然不会反应this.state值的变化；而this.setState()函数所做的事情，首先是改变this.state的值，然后驱动组件更新，这样才有机会让this.state的新值出现在界面上。

prop和state的对比

• prop用于定义外部接口，state用于记录内部状态
• prop的值通过外部组件传入，state的值在组件内部定义
• 组件不应该修改prop的值，state存在的目的就是让组件来改变的