React:组件的数据

React组件的数据分为两种，prop和state，无论prop或者state的改变，都可能引发组件的重新渲染，那么，设计一个组件的时候，什么时候选择用prop什么时候用state呢？原则很简单，prop是组件的对外接口，state是组件的内部状态，对外用prop，对内用state。

React的prop

prop是property的简写，是从外部传递给组件的数据，一个React组件通过定义自己能够接受的prop就定义了自己的对外公共接口。
每个React组件都是独立存在的模块，组件之外的一切都是外部世界，外部世界就是通过prop来和组件对话的。

读取prop

class Children1 extends React.Component {
    render() {
        return (
            <div>{this.props.a1}</div> //这里props.a1就是Children1相对于父组件的接口
        )
    }
}

给prop赋值，并接受父组件传的参数

class Rongqi extends React.Component {
    render() {
        return (
            <div>
                <h1>{this.state.h1}</h1>
                <Children1 a1={'任何数据'} /> //Children1组件调用，a1接受父亲传的参数
            </div>
        )
    }
}

React的state

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

初始化state

    constructor(props) {
        super(props);
        this.state = {
            h1: '父亲数据111',
            a1: '儿子数据111',
            a2: '儿子数据222'
        }
    }

读取和更新state

改变组件state必须使用this.setState函数，不能直接去修改this.state。

class Rongqi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            h1: '父亲数据111',
            a1: '儿子数据111',
            a2: '儿子数据222'
        }
    }
    render() {
        return (
            <div>
                <h1>{this.state.h1}</h1> //子组件Children2向父组件传数据
                <Children1 a1={this.state.a1} /> //父组件向子组件Children1传数据
                <Children2 a2={this.state.a2} setstate={this.setState.bind(this)} /> 
            </div>
        )
    }
}
class Children1 extends React.Component {
    render() {
        return (
            <div>{this.props.a1}</div>
        )
    }
}
class Children2 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            a2: '2222儿子的数据'
        }
    }
    render() {
        return (
            <div onClick={() => {
                this.props.setstate({ h1: '我是儿子的数据' })
            }}>{this.props.a2}</div>
        )
    }
}

prop和state的对比

• prop用于定义外部接口，state用于记录内部状态；
• prop的赋值在外部世界使用组件时，state的赋值在组件内部；
• 组件不应该改变prop的值，state存在的目的就是让组件来改变的。
  组件的state就相当于组件的记忆，其存在意义就是被修改，每一次通过this.setState就改变了组件的状态，然后通过渲染过程把这种变化体现出来。