资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/ReactJS组件之间通信

ReactJS组件之间通信

codecook / 2158人阅读

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

最近在学习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. var QuestionList=React.createClass({
  10.     prepareToRender:function(list){
  11.         var array=[];
  12.         for(var i=0;i);
  13.         }
  14.         return array;
  15.     },
  16.     render:function(){
  17.         var array=this.prepareToRender(this.props.jsonObj);
  18.         return 
    {array}
    ;
  19.     }
  20. });
  21. var Main = React.createClass({
  22.     //开始渲染
  23.     render: function () {
  24.         return (
  25.             
  26.                 
  27.                     
  28.                         
  29.                     
  30.             
  31.         );
  32.     }
  33. });
  34. ReactDOM.render(
  35.     
    ,
  36.     document.getElementById("container")
  37. );

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

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

数据从子组件到父组件

理论上来说数据只能是单向的，所以不借助插件数据还真不好从子组件到父组件，一种很简单的手段是回调函数：
在父组件当中写个回调函数，然后传递到子组件，什么时候子组件数据变化了，直接调这个回调函数就可以了。

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

</>复制代码 
  1. var Jumbotron = React.createClass({
  2.     handleClick: function () {
  3.         this.props.openTheWindow(false);
  4.     },
  5.     render: function () {
  6.         return (
  7.                 
  8.                     
  9.                         
  10.                         
  11.                     
  12.                 
  13.
); } }); var Main = React.createClass({ getInitialState: function () { return { openTheWindow: true }; }, //开始给子组件一个回调函数，用来做子组件给父组件通信使用 buttonResponse:function(windowSatus){ this.setState({openTheWindow : windowSatus}); }, //开始渲染 render: function () { console.log(jsonObj) return (
); } }); ReactDOM.render(
, document.getElementById("container") );

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

兄弟组件之间的通信

这个其实应该是一个动态应用中最常见的通信，比如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.             
  11.                 
  12.                     
  13.                         
  14.                         
  15.                     
  16.                 
  17.             
  18.         );
  19.     }
  20. });
  21. var Form = React.createClass({
  22.     getInitialState:function(){
  23.         return {
  24.             inputTitle:"请输入标题",
  25.             mainBody:"在此输入正文"
  26.         };
  27.     },
  28.     //点击按钮触发事件：清除所有已经输入的文字
  29.     cleanText:function(){
  30.         this.setState({
  31.             inputTitle:"",
  32.             mainBody:""});
  33.     },
  34.     //表单监视事件
  35.     handleChange(name,e) {
  36.         var newState = {};
  37.         console.log(name);
  38.         newState[name] =event.target.value;
  39.         this.setState(newState);
  40.     },
  41.     render: function () {
  42.         return (
  43.             
  44.                 
  45.                     
  46.                         
  47.                         
  48.                     
  49.                     
  50.                         
  51.                         
  52.                     
  53.                     
  54.                         
  55.                         
  56.                     
  57.                 
  58.             
  59.         )
  60.     }
  61. })
  62. var Main = React.createClass({
  63.     getInitialState: function () {
  64.         return {
  65.             openTheWindow: true
  66.         };
  67.     },
  68.     //开始给子组件一个回调函数，用来做子组件给父组件通信使用
  69.     buttonResponse:function(windowSatus){
  70.         this.setState({openTheWindow : windowSatus});
  71.     },
  72.     //开始渲染
  73.     render: function () {
  74.         console.log(jsonObj)
  75.         return (
  76.             
  77.                 
  78.                 
  79.                     
  80.                 
  81.             
  82.         );
  83.     }
  84. });
  85. ReactDOM.render(
  86.     
    ,
  87.     document.getElementById("container")
  88. );

就是这样，

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

</>复制代码 
  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.             
  11.                 
  12.                     
  13.                         
    React+bootstrap简单实例
  14.                     
  15.                 
  16.                 
  17.                     
  18.                         
    上手体验：第一次尝试组件化开发
  19.                     
  20.                 
  21.                 
  22.                     
  23.                         
  24.                         
  25.                     
  26.                 
  27.             
  28.         );
  29.     }
  30. });
  31. var Form = React.createClass({
  32.     getInitialState:function(){
  33.         return {
  34.             inputTitle:"请输入标题",
  35.             mainBody:"在此输入正文"
  36.         };
  37.     },
  38.     //点击按钮触发事件：清除所有已经输入的文字
  39.     cleanText:function(){
  40.         this.setState({
  41.             inputTitle:"",
  42.             mainBody:""});
  43.     },
  44.     //表单监视事件
  45.     handleChange(name,e) {
  46.         var newState = {};
  47.         console.log(name);
  48.         newState[name] =event.target.value;
  49.         this.setState(newState);
  50.     },
  51.     render: function () {
  52.         return (
  53.             
  54.                 
  55.                     
  56.                         
  57.                         
  58.                     
  59.                     
  60.                         
  61.                         
  62.                     
  63.                     
  64.                         
  65.                         
  66.                     
  67.                 
  68.             
  69.         )
  70.     },
  71.     //监测从新渲染
  72.     componentDidUpdate:function(){
  73.         console.log("子组件重新渲染；");
  74.     }
  75. })
  76. var Question = React.createClass({
  77.     getInitialState : function(){
  78.         return {
  79.             click:true,
  80.             disClick:true
  81.         };
  82.     },
  83.     numberHandle:function(){
  84.         if(this.state.click===true){
  85.             //奇数次点击，开始增加数据
  86.             this.props.obj.applaud+=1;
  87.             this.setState({click:false});
  88.         }else{
  89.             //偶数次点击，减去数据
  90.             this.props.obj.applaud-=1;
  91.             this.setState({click:true});
  92.         }
  93.     },
  94.     decreateHandle:function(){
  95.         if(this.state.disClick===true){
  96.             //奇数次点击，开始增加数据
  97.             this.props.obj.applaud-=1;
  98.             this.setState({disClick:false});
  99.         }else{
  100.             //偶数次点击，减去数据
  101.             this.props.obj.applaud+=1;
  102.             this.setState({disClick:true});
  103.         }
  104.     },
  105.     render: function () {
  106.         return (
  107.             
  108.                 
  109.                     
  110.                         
  111.                     
  112.                      
  113.                     
  114.                         
  115.                         
  116.                     
  117.                 
  118.                 
  119.                     
    {this.props.obj.question}
  120.                     
    {this.props.obj.TextArea}
  121.                 
  122.             
  123.         );
  124.     }
  125. });
  126. var QuestionList=React.createClass({
  127.     prepareToRender:function(list){
  128.         var array=[];
  129.         for(var i=0;i);
  130.         }
  131.         return array;
  132.     },
  133.     render:function(){
  134.         var array=this.prepareToRender(this.props.jsonObj);
  135.         return 
    {array}
    ;
  136.     }
  137. });
  138. //这里模拟出几条数据
  139. var jsonObj=[
  140.     {name:"A",question:"从小被人打怎么办？",TextArea:"习惯就好了",applaud:35,disagree:1},
  141.     {name:"B",question:"长的太帅被人砍怎么办？",TextArea:"食屎啦你",applaud:35,disagree:10},
  142.     {name:"C",question:"因为太胖被人摸奶怎么办？",TextArea:"享受就好了",applaud:35,disagree:45},
  143.     {name:"D",question:"被老师打不开心",TextArea:"用钱打ta脸",applaud:35,disagree:6},
  144.     {name:"E",question:"不爱洗澡怎么办？",TextArea:"打一顿就好了",applaud:35,disagree:9}
  145. ]
  146. var Main = React.createClass({
  147.     getInitialState: function () {
  148.         return {
  149.             openTheWindow: true
  150.         };
  151.     },
  152.     //开始给子组件一个回调函数，用来做子组件给父组件通信使用
  153.     buttonResponse:function(windowSatus){
  154.         this.setState({openTheWindow : windowSatus});
  155.     },
  156.     //开始渲染
  157.     render: function () {
  158.         console.log(jsonObj)
  159.         return (
  160.             
  161.                 
  162.                 
  163.                     
  164.                     

  165.                     
  166.                         
  167.                     
  168.                 
  169.             
  170.         );
  171.     },
  172. //    执行hook函数：重新渲染完成的时候调这个函数
  173.     componentDidUpdate:function(){
  174.         console.log(this.state.openTheWindow);
  175.     }
  176. });
  177. ReactDOM.render(
  178.     
    ,
  179.     document.getElementById("container")
  180. );

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

云服务器 GPU云服务器 组件之间通信 App之间通信 组件和组件通信 两台服务器之间的通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91001.html

相关文章

  • Reactjs vs. Vuejs

    摘要：上图是二月份前端框架排名，位居第一，排名第三。我们认为前端模板和组件代码是紧密相连的。直到最近看了文档，才发现另有蹊跷。 欢迎大家关注腾讯云技术社区-segmentfault官方主页，我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊，从事Web前端开发工作，2016年加入腾讯OMG广告平台产品部，喜欢研究前端技术框架。 这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经...

    AaronYuan 评论0 收藏0

  • es6语法的reactjs的state状态和组件间props传递的实践

    摘要：目前只是体会到组件之间传递的值的初始来源一般都是值，可能是实践不够的原因。。。此时，可以建一个组件内部封装一个构造函数，内部封装三个方法。 PS：开头的一段废话        想起一个月前还不知道reactjs该如何下手的而今天有点小体会，还是有点小欣慰，不过回望一些走过的坑和开始时的满头浆糊觉得还是有点恐怖的。今天分享一点实践中的小心得给新手朋友们。 reactjs的es6语法形式 ...

    malakashi 评论0 收藏0

  • 【Under-the-hood-ReactJS-Part1】React源码解读

    摘要：回到，事务是中广泛采用的一种模式。先不论包装行为，事务允许应用重置事务流，阻塞一个已经在执行过程中的同步方法等等。我们调用挂载方法，并把它包装进这个事务中，这是为了在挂载动作后，会检查已挂载组件影响到了哪些内容，并更新这些内容。 接上文， React流程图：https://bogdan-lyashenko.gith... 事务 到现在这一步，组件实例已经通过某种方式加入到React的生...

    lindroid 评论0 收藏0

  • React中组件通信的几种方式

    摘要：首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信父组件向子组件通信数据流动是单向的父组件向子组件通信也是最常见的父组件通过向子组件传递需要的信息子组件向父组件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

    yeooo 评论0 收藏0

  • ReactJs入门教程

    摘要：组件关注的只应该是状态，不同的状态呈现不同的表现形式。组件一切都是组件倡导开发者将切分成一个个组件从而达到松耦合及重用的目的。只不过的命名是进入状态之前跟进入状态之后。 前端已不止于前端－ReactJs初体验 原文写于 2015-04-15 https://github.com/kuitos/kuitos.github.io/issues/21 要说2015年前端届最备受瞩目的技术是啥...

    bingo 评论0 收藏0

发表评论

登陆后可评论

0条评论

codecook

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<