元件之間為什麼要通訊？因為有依賴。
那麼，作為react元件，怎麼通訊？
進行 父-子 通訊，可以直接pass props。
進行 子-父 通訊，往父元件傳給子元件的函式注入引數。
對於沒有 父-子 關係的元件間的通訊，你可以設定你自己的全域性事件系統。
詳情見原文和翻譯文
那麼，到底如何設定全域性事件系統呢，react官網沒講。
該文指出，
在元件巢狀較深時，純props通訊不適用，因為要維護很長的通訊鏈。
在元件很多時，定義很多公共變數也不方便。
使用pub/sub模式有助於簡化多元件通訊問題。
那麼，市場上哪個pub/sub模式實現較好。
還要推薦一篇不錯的reflux的介紹和基本使用文章。
reflux認為react元件由store，view，actions組成。
view即html**，它是由store裡面的原始資料經過運算得出。
store裡面除了原始資料，還有各種原始資料處理方法。
當view想改變store的原始資料，可通過actions。
元件之間的通訊，就通過這些原始資料處理方法。
reflux忽視元件之間的層級關係，不管父-子，子-父等等，皆可通過store通訊。
所以，重點來了（黑板敲三下），我們要理清元件之間的依賴關係。
那麼，元件之間有哪些依賴關係呢。
請聽下回分解。
可以劇透的是，
依賴關係無非三種，我依賴你，你依賴我，我們互相依賴，我們互相嘿嘿嘿。
其中，互相依賴這個場景較複雜，示例**如下：
// actions1.js
module.exports = reflux.createactions([
'getdata',
'setdata',
]);// pagedemo1.js
const reactmixin = require('react-mixin');
const actions = require('./actions1');
const store = require('./store1');
class demo1 extends react.component ;
}click()
render()
return (
設定demo1的資料
設定demo2的資料);}
componentwillmount()
componentdidmount()
componentwillreceiveprops(nextprops)
shouldcomponentupdate(nextprops, nextstate)
componentwillupdate(nextprops, nextstate)
componentdidupdate(prevprops, prevstate)
componentwillunmount()
}reactmixin.onclass(demo1, reflux.connect(store));
module.exports = demo1;
// store1.js
const actions = require('./actions');
module.exports = reflux.createstore(;
t.data.name = "demo1";
t.updatecomponent();
},onsetdata:function (name) ;
t.data.name = name;
t.updatecomponent();
},updatecomponent: function() ,
getinitialstate: function()
});// actions2.js
module.exports = reflux.createactions([
'getdata',
'setdata',
"setdemo1data"
]);// pagedemo2.js
const reactmixin = require('react-mixin');
const actions = require('./actions2');
const store = require('./store2');
const demo1 = require('../demo1');
class demo2 extends react.component ;
}click()
setdemo1data()
render()
return (
設定demo2的資料
設定demo1的資料);}
componentwillmount()
componentdidmount()
componentwillreceiveprops(nextprops)
shouldcomponentupdate(nextprops, nextstate)
componentwillupdate(nextprops, nextstate)
componentdidupdate(prevprops, prevstate)
componentwillunmount()
}reactmixin.onclass(demo2, reflux.connect(store));
module.exports = demo2;
// store2.js
const actions = require('./actions2');
const demo1store = require('../store1');
module.exports = reflux.createstore(;
t.data.name = "demo2";
t.updatecomponent();
},onsetdata:function (name) ,
onsetdemo1data:function(name) ,
updatecomponent: function() ,
getinitialstate: function()
});
那麼，有什麼構建工具能快速搭建開發環境，執行示例**。
只要你機子上nodejs>=4.0 版本，npm>=3.0 版本，便可以使用nowa。
nowa 的誕生旨在解決以下痛點：
每個專案的構建任務配置在自己專案中維護，不方便統一維護和管理；
構建配置對於很多新手使用者來說還是太繁瑣，迫切需要乙個一站式的解決方案；
專案模板的更新依賴於腳手架的發布，頻繁更新使用者體驗不佳；
希望有更流暢的開發體驗；
希望可以在乙個地方找到所有常用的工具；
希望能有乙個便捷的遠端除錯方案；
……好了，至於使用方法大家可進入官網檢視，我掩面而逃~~~
React專案中中使用redux進行資料管理
二 在src目錄下建立store資料夾，再在store資料夾中建立index.js檔案和reducer.js檔案 三 在剛剛建立好的index.js檔案中引入 import from redux import reducer from reducer const store createstore ...
React之propsTypes進行型別的檢查
react中propstypes的主要作用就是用於對傳入引數的屬性的檢查。如 import proptypes from prop types class greeting extends react.component greeting.proptypes 其中,name proptypes.st...
Slog89 使用React框架進行前端開發1
上善若水 水善利萬物而不爭 處眾人之所惡 故幾於道 需要的資訊和資訊源 cd desktop mkdir arthurslogstore cd arthurslogstore cd client arthurslogstore public index.html src index.css inde...