分析了Component之后，大家有没有发现Component的一个局限？没错！就是传参！关于Component的一个定义就是，只能传入props的参数。也就是说所有的沟通都要在这个props中进行。有种探监的既视感，只能在规定的窗口，拿着对讲机聊天，其他的方式无法沟通。React对于props有着苛刻的规定。
All React components must act like pure functions with respect to their props.
简单地来说就是props是不能被改变的，是只读的。（大家如果不信邪，要试试，可以直接改props的值，最终等待你的一定是报错页面。）
这里需要科普下纯函数pure function的概念，之后Redux也会遇到的。意思就是纯函数只是一个过程，期间不改变任何对象的值。因为JS的对象有个很奇怪的现象。如果你传入一个对象到这个方法中，并且改变了他某属性的值，那么传入的这个对象在函数外也会改变。pure function就是你的改动不能对函数作用域外的对象产生影响。所以每次我们在Component里面会遇到一个新的对象state，一般这个组件的数据我们会通过state在当前组件中进行变化处理。
划重点：因为JS的特性，所以props设置为只读，是为了不污染全局的作用域。这样很大程度上保证了Component的独立性。相当于一个Component就是一个小世界。
我发现定义props的值也是一门学问，也挺容易踩坑的。
比如下方代码，我认为打印出来应该是props:{firstName:"Nana",lastName:"Sun"...}，结果是props:{globalData:true}.
let globalData={ firstName:"Nana", lastName:"Sun", greeting:["Good moring","Good afternoon","Good night"] } ReactDOM.render(<App globalData/>, document.getElementById('root'));所以对于props是如何传入组件的，我觉得有必要研究一下下。
props其实就是一个参数直接传入组件之中的，并未做什么特殊处理。所以对props进行处理的是在React.createElement这一个步骤之中。我们来回顾下React.createElement是怎么操作的。
React.createElement( "yourTagName", {className:"aaa",color:"red:}, "文字/子节点" ) //对应的JSX写法是： <yourTagName className="aaa" color="red>文字/子节点</yourTagName>也就是他的语法是一个属性名=属性值，如果我们直接放一个<App globalData/>，那么就会被解析成<App globalData=true/>}，所以props当然得不到我们想要的结果。这个是他的一个语法，我们无法扭转，但是我们可以换一种写法，让他无法解析成属性名=属性值，这个写法就是{...globalData}，解构然后重构，这样就可以啦。
Components之间的消息传递 单个组件的更新->setStateComponents之间的消息传递是一个互动的过程，也就是说Component是“动态”的而不是“静态”的。所以首先我们得让静态的Component“动起来”，也就是更新组件的的值，前面不是提过props不能改嘛，那怎么改？前文提过Component就是一个小世界，所以这个世界有一个状态叫做state。
先考虑如何外力改变Component的状态，就比如点击啦，划过啦。
class App extends Component { state={ num:0 } addNum=()=>{ this.setState({ num:this.state.num+1 }) } render() { return( [ <p>{this.state.num}</p>, <button onClick={this.addNum}>点我+1</button> ] ) } }这里我用了onClick的用户主动操作的方式，迫使组件更新了。其实component这个小世界主要就是靠state来更新，但是不会直接this.state.XXX=xxx直接改变值，而是通过this.setState({...})来改变。
这里有一个小tips，我感觉大家很容易犯错的地方，有关箭头函数的this指向问题，大家看下图。箭头函数转化成ES5的话，我们就可以很清晰得看到，箭头函数指向他上一层的函数对象。这里也就指向App这个对象。
如果不想用箭头函数，那么就要注意了，我们可以在onClick中加一个bind(this)来绑定this的指向，就像这样onClick={this.addNum.bind(this)}。
render() { return( [ <p>{this.state.num}</p>, <button onClick={this.addNum.bind(this)}>点我+1</button> ] ) } 组件之间的通信那么Component通过this.setState可以自high了，那么组件之间的呢？Component不可能封闭自己，不和其他的Component合作啊？那我们可以尝试一种方式。
在App中我把<p>{this.state.num}</p>提取出来，放到App1中，然后App1直接用props来显示，因为props是来自父元素的。相当于我直接在App（父元素）中传递num给了App1（子元素）。每次App中state发生变化，那么App1就接收到召唤从而一起更新。那么这个召唤是基于一个什么样的理论呢？这个时候我就要引入React的生命周期life cycle的问题了。
//App render() { return( [ <App1 num={this.state.num}/>, <button onClick={this.addNum}>点我+1</button> ] ) } //App1 render() { return( [ <p>{this.props.num}</p>, ] ) } react的生命周期