ReactJS组件之间如何进行通信

最近在学习react.js，不得不说第一次接触组件化开发很神奇，当然也很不习惯。

react的思想还是蛮独特的，当然围绕react的一系列自动化工具也是让我感觉亚历山大

今天总结一下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} />

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

数据从子组件到父组件

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

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

比如现在的jumbotron的按钮被点击了，我们想把被点击这个事件发给它的父组件也就是main组件，那么我们可以这个做：

1. var Jumbotron = React.createClass({ 
2.     handleClick: function () { 
3.         this.props.openTheWindow(false); 
4.     }, 
5.     render: function () { 
6.         return ( 
7.                 <div className="row"> 
8.                     <div className="col-md-6  col-md-offset-3"> 
9.                         <button type="button" className="btn btn-default btn-lg" onClick={this.handleClick}>开始体验 
10.                         </button> 
11.                     </div> 
12.                 </div> 
13.             </div> 
14.         ); 
15.     } 
16. }); 
17.  
18. var Main = React.createClass({ 
19.     getInitialState: function () { 
20.         return { 
21.             openTheWindow: true 
22.         }; 
23.     }, 
24.     //开始给子组件一个回调函数，用来做子组件给父组件通信使用 
25.     buttonResponse:function(windowSatus){ 
26.         this.setState({openTheWindow : windowSatus}); 
27.     }, 
28.     //开始渲染 
29.     render: function () { 
30.         console.log(jsonObj) 
31.         return ( 
32.             <div> 
33.                 <Jumbotron openTheWindow={this.buttonResponse}/> 
34.             </div> 
35.         ); 
36.     } 
37. }); 
38. ReactDOM.render( 
39.     <Main />, 
40.     document.getElementById('container') 
41. );  

子组件通知父组件状态变化就是这样，就好像是儿子找爸爸要零花钱，零花钱以及给不给都是爸爸说了算的。

兄弟组件之间的通信

这个其实应该是一个动态应用中最常见的通信，比如jubotron组件的点击按钮，form组件的表单出现：

这就是一个典型的兄弟之间的通信：

兄弟节点其实可以就是子父通信&&父子通信的叠加

首先按钮被点击，子组件通知负组件这个事件，然后父组件把这个消息带给另一个子组件

下边是个点击按钮显示表单的例子：

1. /** 
2.  * Created by niuGuangzhe on 2016/9/10. 
3.  */ 
4. var Jumbotron = React.createClass({ 
5.     handleClick: function () { 
6.         this.props.openTheWindow(false); 
7.     }, 
8.     render: function () { 
9.         return ( 
10.             <div className="jumbotron"> 
11.                 <div className="row"> 
12.                     <div className="col-md-6  col-md-offset-3"> 
13.                         <button type="button" className="btn btn-default btn-lg" onClick={this.handleClick}>开始体验 
14.                         </button> 
15.                     </div> 
16.                 </div> 
17.             </div> 
18.         ); 
19.     } 
20. }); 
21.  
22. var Form = React.createClass({ 
23.     getInitialState:function(){ 
24.         return { 
25.             inputTitle:"请输入标题", 
26.             mainBody:"在此输入正文" 
27.         }; 
28.     }, 
29.     //点击按钮触发事件：清除所有已经输入的文字 
30.     cleanText:function(){ 
31.         this.setState({ 
32.             inputTitle:"", 
33.             mainBody:""}); 
34.     }, 
35.     //表单监视事件 
36.     handleChange(name,e) { 
37.         var newState = {}; 
38.         console.log(name); 
39.         newState[name] =event.target.value; 
40.         this.setState(newState); 
41.     }, 
42.     render: function () { 
43.         return ( 
44.             <div style={{display:this.props.openTheWindow?"none":"block"}}> 
45.                 <form role="form"> 
46.                     <div className="form-group"> 
47.                         <label htmlFor="title">标题</label> 
48.                         <input type="text" className="form-control" id="title" name="inputTitle" value={this.state.inputTitle} onChange={this.handleChange.bind(this,"inputTitle")}/> 
49.                     </div> 
50.  
51.                     <div className="form-group"> 
52.                         <label htmlFor="textArea">正文</label> 
53.                         <textarea className="form-control" rows="3" id="textArea" name="mainBody" value={this.state.mainBody} onChange={this.handleChange.bind(this,"mainBody")}></textarea> 
54.                     </div> 
55.                     <div className="row"> 
56.  
57.                         <input type="button" className="btn btn-default pull-right leaveMeAlone" value="取消"  onClick={this.cleanText}/> 
58.                         <input type="submit" className="btn btn-primary pull-right leaveMeAlone" value="提交"/> 
59.                     </div> 
60.                 </form> 
61.             </div> 
62.         ) 
63.     } 
64. }) 
65.  
66.  
67. var Main = React.createClass({ 
68.     getInitialState: function () { 
69.         return { 
70.             openTheWindow: true 
71.         }; 
72.     }, 
73.     //开始给子组件一个回调函数，用来做子组件给父组件通信使用 
74.     buttonResponse:function(windowSatus){ 
75.         this.setState({openTheWindow : windowSatus}); 
76.     }, 
77.     //开始渲染 
78.     render: function () { 
79.         console.log(jsonObj) 
80.         return ( 
81.             <div> 
82.                 <Jumbotron openTheWindow={this.buttonResponse}/> 
83.                 <div className="container col-md-6 col-md-offset-3"> 
84.                     <Form openTheWindow={this.state.openTheWindow}/> 
85.                 </div> 
86.             </div> 
87.         ); 
88.     } 
89. }); 
90. ReactDOM.render( 
91.     <Main />, 
92.     document.getElementById('container') 
93. );  

就是这样，

其实上边的代码是我从之前的没事干做的一个单页面上拿过来改的，为了不出现代码无法运行的问题，下边贴出所有代码：

1. /** 
2.  * Created by niuGuangzhe on 2016/9/10. 
3.  */ 
4. var Jumbotron = React.createClass({ 
5.     handleClick: function () { 
6.         this.props.openTheWindow(false); 
7.     }, 
8.     render: function () { 
9.         return ( 
10.             <div className="jumbotron"> 
11.                 <div className="row"> 
12.                     <div className="col-md-6  col-md-offset-3"> 
13.                         <h2 className="colorChange">React+bootstrap简单实例</h2> 
14.                     </div> 
15.                 </div> 
16.                 <div className="row"> 
17.                     <div className="col-md-6  col-md-offset-3"> 
18.                         <p className="colorChange">上手体验：第一次尝试组件化开发</p> 
19.                     </div> 
20.                 </div> 
21.                 <div className="row"> 
22.                     <div className="col-md-6  col-md-offset-3"> 
23.                         <button type="button" className="btn btn-default btn-lg" onClick={this.handleClick}>开始体验 
24.                         </button> 
25.                     </div> 
26.                 </div> 
27.             </div> 
28.         ); 
29.     } 
30. }); 
31.  
32. var Form = React.createClass({ 
33.     getInitialState:function(){ 
34.         return { 
35.             inputTitle:"请输入标题", 
36.             mainBody:"在此输入正文" 
37.         }; 
38.     }, 
39.     //点击按钮触发事件：清除所有已经输入的文字 
40.     cleanText:function(){ 
41.         this.setState({ 
42.             inputTitle:"", 
43.             mainBody:""}); 
44.     }, 
45.     //表单监视事件 
46.     handleChange(name,e) { 
47.         var newState = {}; 
48.         console.log(name); 
49.         newState[name] =event.target.value; 
50.         this.setState(newState); 
51.     }, 
52.     render: function () { 
53.         return ( 
54.             <div style={{display:this.props.openTheWindow?"none":"block"}}> 
55.                 <form role="form"> 
56.                     <div className="form-group"> 
57.                         <label htmlFor="title">标题</label> 
58.                         <input type="text" className="form-control" id="title" name="inputTitle" value={this.state.inputTitle} onChange={this.handleChange.bind(this,"inputTitle")}/> 
59.                     </div> 
60.  
61.                     <div className="form-group"> 
62.                         <label htmlFor="textArea">标题</label> 
63.                         <textarea className="form-control" rows="3" id="textArea" name="mainBody" value={this.state.mainBody} onChange={this.handleChange.bind(this,"mainBody")}></textarea> 
64.                     </div> 
65.                     <div className="row"> 
66.  
67.                         <input type="button" className="btn btn-default pull-right leaveMeAlone" value="取消"  onClick={this.cleanText}/> 
68.                         <input type="submit" className="btn btn-primary pull-right leaveMeAlone" value="提交"/> 
69.                     </div> 
70.                 </form> 
71.             </div> 
72.         ) 
73.     }, 
74.     //监测从新渲染 
75.     componentDidUpdate:function(){ 
76.         console.log("子组件重新渲染；"); 
77.     } 
78. }) 
79.  
80. var Question = React.createClass({ 
81.     getInitialState : function(){ 
82.         return { 
83.             click:true, 
84.             disClick:true 
85.         }; 
86.     }, 
87.     numberHandle:function(){ 
88.         if(this.state.click===true){ 
89.             //奇数次点击，开始增加数据 
90.             this.props.obj.applaud+=1; 
91.             this.setState({click:false}); 
92.         }else{ 
93.             //偶数次点击，减去数据 
94.             this.props.obj.applaud-=1; 
95.             this.setState({click:true}); 
96.         } 
97.     }, 
98.     decreateHandle:function(){ 
99.         if(this.state.disClick===true){ 
100.             //奇数次点击，开始增加数据 
101.             this.props.obj.applaud-=1; 
102.             this.setState({disClick:false}); 
103.         }else{ 
104.             //偶数次点击，减去数据 
105.             this.props.obj.applaud+=1; 
106.             this.setState({disClick:true}); 
107.         } 
108.     }, 
109.     render: function () { 
110.         return ( 
111.             <div className="row leaveMe"> 
112.                 <div className="col-md-2"> 
113.                     <div className="col-md-12"> 
114.                         <button className="btn col-md-12 " onClick={this.numberHandle}>{this.props.obj.applaud-this.props.obj.disagree}<br/><span 
115.                             className="glyphicon glyphicon-chevron-up"></span></button> 
116.                     </div> 
117.                     <span>&ensp;</span> 
118.                     <div className="col-md-12"> 
119.                         <button className="btn col-md-12" onClick={this.decreateHandle}><span 
120.                             className="glyphicon glyphicon-chevron-down"></span> 
121.                         </button> 
122.                     </div> 
123.                 </div> 
124.                 <div className="col-md-10  bs-callout bs-callout-info"> 
125.                     <h4>{this.props.obj.question}</h4> 
126.                     <p>{this.props.obj.TextArea}</p> 
127.                 </div> 
128.             </div> 
129.         ); 
130.     } 
131. }); 
132.  
133. var QuestionList=React.createClass({ 
134.     prepareToRender:function(list){ 
135.         var array=[]; 
136.         for(var i=0;i<list.length;i++){ 
137.             array.push(<Question obj={list[i]}   key={i}/>); 
138.         } 
139.         return array; 
140.     }, 
141.     render:function(){ 
142.         var array=this.prepareToRender(this.props.jsonObj); 
143.         return <div>{array}</div>; 
144.     } 
145. }); 
146.  
147.  
148. //这里模拟出几条数据 
149. var jsonObj=[ 
150.     {name:"A",question:"从小被人打怎么办？",TextArea:"习惯就好了",applaud:35,disagree:1}, 
151.     {name:"B",question:"长的太帅被人砍怎么办？",TextArea:"食屎啦你",applaud:35,disagree:10}, 
152.     {name:"C",question:"因为太胖被人摸奶怎么办？",TextArea:"享受就好了",applaud:35,disagree:45}, 
153.     {name:"D",question:"被老师打不开心",TextArea:"用钱打ta脸",applaud:35,disagree:6}, 
154.     {name:"E",question:"不爱洗澡怎么办？",TextArea:"打一顿就好了",applaud:35,disagree:9} 
155. ] 
156.  
157. var Main = React.createClass({ 
158.     getInitialState: function () { 
159.         return { 
160.             openTheWindow: true 
161.         }; 
162.     }, 
163.     //开始给子组件一个回调函数，用来做子组件给父组件通信使用 
164.     buttonResponse:function(windowSatus){ 
165.         this.setState({openTheWindow : windowSatus}); 
166.     }, 
167.     //开始渲染 
168.     render: function () { 
169.         console.log(jsonObj) 
170.         return ( 
171.             <div> 
172.                 <Jumbotron openTheWindow={this.buttonResponse}/> 
173.                 <div className="container col-md-6 col-md-offset-3"> 
174.                     <Form openTheWindow={this.state.openTheWindow}/> 
175.                     <br/><br/> 
176.                     <div className="container-fluid"> 
177.                         <QuestionList jsonObj={jsonObj}  /> 
178.                     </div> 
179.                 </div> 
180.             </div> 
181.         ); 
182.     }, 
183. //    执行hook函数：重新渲染完成的时候调这个函数 
184.     componentDidUpdate:function(){ 
185.         console.log(this.state.openTheWindow); 
186.     } 
187. }); 
188. ReactDOM.render( 
189.     <Main />, 
190.     document.getElementById('container') 
191. );  

最后就是一个很重要的问题：就是多层级的据数据传输，如果还用这个方式来传播的话，效率貌似是个大问题，解决办法看大家的做法目前暂时还是flux之类的其他框架，等研究出来单独写篇文章吧

作者：易燃易爆炸

来源：51CTO