React学习笔记（二）[组件及它的state与props]

React其中一个重要思想就是 "react内一切皆组件"，一个好的应用应该有一定的原则来划分组件。
我们划分组件的时候应该尽量保持一个组件只做一件事。每个小组件只关注实现单个功能，组合起来也能实现复杂的实际需求。
虽然组件都是独立个体，但不同组件之间总会有通信交流。
我们划分组件要满足“高内聚，低耦合”的原则。

• 高内聚---将逻辑紧密相关的内容放在一个组件内。
• 低耦合---不同组件之间的依赖关系要尽量弱化。

组件的数据

react组件的数据分两种：prop和state。prop是组件的对外接口，一般用于组件之间的通信；而state是组件的内部状态。

prop

prop是从外部传递给组件的数据。下面举个例子

//  组件内部代码片段   src/component/todoItem.js
render(){
   return(
     
   )
},
changeInputVal(e){
  this.props.onChange.call(null,e)//带有参数e的回调函数
}

// 包含todoItem的父组件代码片段    src/app.js
import Todoltem from './component/todoItem.js'
...
  render(){
     return (
        

            
        
     ) 
  },
  updateValue(e){
      console.log(e)//子组件传递过来的参数e
  }

React组件的prop看起来很像是HTML元素的属性，但React组件的prop所能支持的类型丰富比HTML元素的属性更多了，HTML元素的属性仅能是字符串，而prop还可以是任意一种JS所支持的数据类型。
上面例子举出了prop的数据传递方式

• 外部传递数据给react组件---直接使用prop
• 组件反馈数据给外部---使用带回调函数/参数的函数类型的prop

state

React组件的数据除了prop外还有state。由于prop是父级传递过来的数据，并不能修改，所以记录自身数据变化只能用state。
上面有两个词语是加粗的，一个是记录，一个是变化。

• 变化。
  通常一个组件自身会有多种交互状态或数据的变化。这种变化如果只是内部状态，我们通常会将这些数据放在state内，用于驱动渲染该组件的UI。
• 记录。
  我们知道，state是用于保存内部数据的，那是否直接改变state的数据就可以驱动组件的渲染呢？答案当然是no。这是react的设计，驱动组件的渲染是函数this.setState(这里涉及到生命周期)。this.setState()函数所做的事情，首先是改变this.state的值，然后驱动组件经历更新过程，这样才有机会让this.state里新的值出现在组件界面上。

相关资料
setState：这个API设计到底怎么样