React是现在主流的高效的前端框架，其官方文档 http://reactjs.cn/react/docs/getting-started.html 在介绍组件间通信时只给出了父子组件间通信的方法，而没有给出独立组件间通信的解决方案。这里我介绍一种不错的实现方式——signals.

第一步，我们要建立两个简单的react组件——一个进度条和一个输入框。

组件——进度条：

 var ProcessBar=React.createClass({
           getInitialState:function(){
                return {
                    initValue:0, //初始值
                    endValue:0,  //终值
                    totalValue:100 , //总值
                   };
            },
            render:function(){
                var barStyle={
                    width:this.getPer(),
                };
                return(
                     <div className="progress">
                         <div className="progress-bar" style={barStyle}>{this.getPer()}</div>                     </div>
                    );
              }
         });

　　这个进度条的实现依赖于Bootstrp的进度条组件样式及特效，可以移步：http://v3.bootcss.com/components/ 查看。

组件——input框：

  var Input=React.createClass({            getEndValue:function(){
                    var curValue=this.refs.endValue.value;
                    if(curValue <= 0) curValue=0;
                    if(curValue >=100) curValue=100;
                   },
            render:function(){                return (
                     <div>
                         <input type="text"  ref="endValue" placeholder="请输入值" onChange={this.getEndValue}/>
                     </div>
                    );
             }
             });

　　两个独立的简单的组件已经完成了，下面就来看看如何使它们可以紧密联系，当input框中的值变化时，进度条可以实时变化。

在此，你可以借鉴另一篇博客了解解决独立组件间通信的几种策略——http://www.tuicool.com/articles/AzQzEbq。

这里，我主要介绍signals解决的方案。我们简单看下signals的github上的介绍：http://millermedeiros.github.io/js-signals/，看它给出的应用基本实例：

//custom object that dispatch a `started` signal
var myObject = {
  started : new signals.Signal()
};
function onStarted(param1, param2){
  alert(param1 + param2);
}
myObject.started.dispatch('foo', 'bar'); //dispatch signal passing custom parameters

myObject.started.add(onStarted); //add listener

myObject.started.remove(onStarted); //remove a single listener

　　我们会发现，signals应用很简单，步骤为：

1：先创建一个signals.Signal的实例对象。

2：该对象通过dispatch()方法发布数据。

3：该实例对象提供add(function(data){})方法监听到数据,data默认为发布的数据。

4：如果需要，可以通过remove()关闭连接。

这里要提一下，就是因为发布和监听只能建立一个，所以我们的数据可以集中为一个数据对象，这样就可以大量传递数据了。

好，现在我们来应用到我们的组件中看看能不能解决我们的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>processBar</title>
    <link rel="stylesheet" href="../../public/css/bootstrap-theme.min.css" rel="external nofollow" />
    <link rel="stylesheet" href="../../public/css/bootstrap.min.css" rel="external nofollow" />
    <script src="../../public/js/react-0.14.0.js"></script>
    <script src="../../public/js/react-dom-0.14.0.js"></script>
    <script src="../../public/js/jquery.js"></script>
    <script src="../../public/js/browser.min.js"></script>
    <script src="../../public/js/signals.js"></script>
    <script src="../../public/js/bootstrap.min.js"></script>
    <style>
           #exm{margin:20px auto;height:100px;border:1px solid #000;}
          .progress-bar{width:60%;}
    </style>
</head>
<body>
      <div id="exm"></div>
      <div id="exm2"></div>
      <script type="text/babel">
         //设置数据广播
         var broadData=new signals.Signal(); //全局数据广播对象
         var datas={};  //总数据对象
         var ProcessBar=React.createClass({
            getInitialState:function(){
                return {
                    initValue:0, //初始值
                    endValue:0,  //终值
                    totalValue:100 , //总值
                   };
            },
            getPer:function(){
                var that=this;
                broadData.add(function(data){ //收听到数据
                   that.setState({
                      endValue:data.curValue,
                   });
                });
                 var per=(this.state.endValue-this.state.initValue)/this.state.totalValue *100+"%";
                        return per;
            },
            render:function(){
                var barStyle={
                    width:this.getPer(),
                };
                return(
                     <div className="progress">
                         <div className="progress-bar" style={barStyle}>{this.getPer()}</div>                     </div>
                    );
            }
         });          //输入框
         var Input=React.createClass({            getEndValue:function(){
                    var curValue=this.refs.endValue.value;
                    if(curValue <= 0) curValue=0;
                    if(curValue >=100) curValue=100;
                    datas.curValue=curValue; //将curValue放入总数居对象
                    broadData.dispatch(datas); //发布数据            },
            render:function(){                return (
                     <div>
                         <input type="text"  ref="endValue" placeholder="请输入值" onChange={this.getEndValue}/>
                     </div>
                    );
            }
         });        ReactDOM.render(  //input框要先于进度条渲染
                 <Input/>,
                 document.getElementById("exm2")
            );         ReactDOM.render(
                 <ProcessBar/>,
                 document.getElementById("exm")
            );      </script>
</body>
</html>