今天总结一下react组件之间的通信，权当是自己的学习笔记：

reactJs中数据流向的的特点是：单项数据流

react组件之间的组合不知道为什么给我一种数据结构当中树的感觉，数据就是从根节点(顶端或其他子树的顶端)“流”下来，大概就是这个样子：

比如这是一个组件树，数据就可以从main组件流到jumbotron组件、queationList组件、form组件，类似的queation组件的数据也可以流到下边的question组件里边。

但是很遗憾，这个从上到下的数据流动，只能解决很少的问题，还有一部分的数据流动就是类似从jumbotron组件到form组件的这样的兄弟组件的流动形式，或者隔着几个层级的数据流动，再或者子组件发生了数据的变化，想通知父组件，数据流向从子组件到父组件流，这些问题才是大多数的开发者需要面临的问题。所以这篇笔记总结下基础的组件通信：

数据从父组件到子组件

最简单的通信就是父子间的通信，比如上边图上的有个jsonObj从main流进了QueationList参考代码：

1. //这里模拟出几条数据 
2. var jsonObj=[ 
3.     {name:"A",question:"从小被人打怎么办？",TextArea:"习惯就好了",applaud:35,disagree:1}, 
4.     {name:"B",question:"长的太帅被人砍怎么办？",TextArea:"食屎啦你",applaud:35,disagree:10}, 
5.     {name:"C",question:"因为太胖被人摸怎么办？",TextArea:"享受就好了",applaud:35,disagree:45}, 
6.     {name:"D",question:"被老师打不开心",TextArea:"用钱打脸",applaud:35,disagree:6}, 
7.     {name:"E",question:"不爱洗澡怎么办？",TextArea:"打一顿就好了",applaud:35,disagree:9} 
8. ] 
9.  
10. var QuestionList=React.createClass({ 
11.     prepareToRender:function(list){ 
12.         var array=[]; 
13.         for(var i=0;i<list.length;i++){ 
14.             array.push(<Question obj={list[i]}   key={i}/>); 
15.         } 
16.         return array; 
17.     }, 
18.     render:function(){ 
19.         var array=this.prepareToRender(this.props.jsonObj); 
20.         return <div>{array}</div>; 
21.     } 
22. }); 
23. var Main = React.createClass({ 
24.     //开始渲染 
25.     render: function () { 
26.         return ( 
27.             <div> 
28.                 <div className="container col-md-6 col-md-offset-3"> 
29.                     <div className="container-fluid"> 
30.                         <QuestionList jsonObj={jsonObj}  /> 
31.                     </div> 
32.             </div> 
33.         ); 
34.     } 
35. }); 
36. ReactDOM.render( 
37.     <Main />, 
38.     document.getElementById('container') 
39. ); 

代码写的不怎么规范，但是数据的传递就是这样的：

<QuestionList jsonObj={jsonObj} />

这样就可以把父组件的数据带到子组件里边

数据从子组件到父组件

理论上来说数据只能是单向的，所以不借助插件数据还真不好从子组件到父组件，一种很简单的手段是回调函数：

在父组件当中写个回调函数，然后传递到子组件，什么时候子组件数据变化了，直接调这个回调函数就可以了。