React 组件的数据（笔记）

React 组件的数据分为两种， props和state

props

prop ( property 的简写）是从外部传递给组件的数据， 一个 React 组件通过定义自己能够接受的 prop 就定义了自己的对外公共接口

React 组件要反馈数据给外部世界，也可以用 prop ，因为 prop 的类型不限于纯数据，也可以是函数，函数类型的 prop 等于让父组件交给了子组件一个回调函数，子组件在恰当的实际调用函数类型的 prop ，可以带上必要的参数，这样就可以反过来把信息传递给外部世界

//在构造函数的第一行通过 super 调用父类也就是 React.Component 的构造函数
class Counter extends Component {
  constructor(props) {
    super (props) ; 
    this.state= {
       count: props.initValue ||0 
    }
}

propTypes 检查：组件声明自己的接口规范

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

state

state 代表组件的内部状态，不能修改传入的 prop ，所以需要记录自身数据变化，就要使用 state

如何修改state
不能直接 this.state = 1，只是野蛮地修改了 state ，却没有驱动组件进行重新渲染，既然组件没有重新渲染，当然不会反应 this.state 值的变化；而 this.setState （）函数所做的事情，首先是改变 this.state 的值，然后驱动组件经历更新过程，这样才会渲染到页面中

总结

props 是组件的对外接口， state 是组件的内部状态，对外用 props ，内部用state