『壹』 react rex 怎麼訪問其他model的state
1、先說rex的作用
代理top-level single data flow，從最外層的container下發數據流觸發mb components的更新。
2、題主的業務場景是否可以由rex解決
答案肯定是可以的，但不一定合理。
下發props告知組件B執行更新，用過react的同學都很熟悉這一套，這邊不贅述。
3、業務場景的特殊性
組件交互存在兩種情形，一種是純數據模型層面的組件映射關系，完全可以由rex處理；另一種是eventEmitter層面的交互，比如使用ng2的eventEmitter或者vue的$dispatch場景。
對於後者rex其實是提供解決方案的，一種是寫個小型中間件，專門用於處理pub/sub，另一種是利用rex的subscribe介面添加觀察者函數來觸發pub/sub。
4、是否真的需要eventEmitter
不需要。
既然你用的是react ＋ rex，就應該遵循它的設計原則，對組件劃分的時候，建立足夠好的view model一一映射關系。沒有什麼是rex解決不了的，如果有，那就重新思考下組件設計是否合理，如果還不行，那就考慮寫個中間件。
『貳』 如何製作react組件包上傳到npm
雖說現在市面上組件庫相當多了，但是還有一些組件特定場景市面上沒有，公司內部一些不同項目，有類似相同組件可以直接復用，避免重復造輪子，就可以直接製作一個npm包，下次直接使用。
注意：文中的每一步都很重要，都是踩過的坑
1、注冊npm賬號
地址： https://www.npmjs.com/signup
注意：注冊完後，記得驗證你的郵件地址！一定！否則會在提交組件包的時候報403錯誤，那是因為沒有驗證你的郵箱。
1、創建新的文件夾
2、進入該文件夾，使用cmd命令，npm進入安裝項目流程
3、對應的欄位：
有需要可以自行安裝自己要的依賴，上面幾個是我寫組件必要的幾個依賴，因為我沒有寫對應的依賴版本所以安裝時候會以最新版本安裝。
1、新建如下目錄結構和文件
2、編寫webpack.config.js的配置，以下是最基礎的配置
上面的less-loader沒有啟用lessmoles模塊化比較不好，假設現在項目有好幾個組件，那麼模塊化就可以避免我們不同組件的樣式污染，如果不開啟就不生效，如下例子：
所以得將webpack.config.js修改如下：
接下來往babel.config.js添加編譯時候需要的loader配置：
3、編寫組件
這個是核心部分，就是說這里是你的組件
------------- ./src/index.jsx
------------- ./src/index.less
4、對外暴露組件，編輯根目錄下的index.js文件
我這里叫Test，使用組件包引入時候就是Test組件。別人在引用組件包時候會從該文件作為入口（package.json的main欄位可以配置），這個文件有兩種寫法，第一種：
第二種：
5、編寫webpack讀取的入口文件 public/app.js
webpack啟動、編譯、打包都會從這個文件作為入口（webpack那邊配置的）
6、編寫html模板，public/index.html文件。
我們知道spa單頁面都是依據一個html模板上面引入js創建虛擬dom生成到這個html上面，所以需要有一個掛載的實例模板。
7、編寫.gitignore文件
這個文件可以配置git上傳時候忽略哪些文件不想傳上去，同時發布組件包的時候它也會按照這個文件來，忽略哪些不上傳。
8、添加項目啟動命令：修改package.json文件
給該文件的scripts里添加兩個系統命令，一個是啟動命令，一個是打包命令（製作組件包用的比較少）。注意webpack4的版本可能不是 webpack server --mode development，這個需要自己對應版本。
說明是node版本問題，需要安裝高點版本的node，可以使用nvm來管理node版本，這里不多說，我切換為node 12.0.0版本就可以。
到此為止，我們已經配置好了工程，接下來需要把組件包發布上去
1、發布規則
例如你是淘寶源你需要：
查看設置過的所有的源：npm config get registry
設置當前源為npm： npm config set registry https://registry.npmjs.org/
發布完成後設置回淘寶源：npm config set registry https://registry.npm.taobao.org
2、發布流程
1、登錄注冊好的npm賬號：npm login
輸入對應的賬號、密碼、郵箱即可
『叄』 react antd如何讀取doc文件
1.准備:
npm安裝以下組件
a.安裝react/antd:
npm install react react-dom antd --save
b.安裝webpack/less:
npm install webpack less --save-dev
webpack根據需要選擇使用-g安裝
c.安裝babel-loader以及其他相關package:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
d.選擇安裝style-loader/css-loader
npm install style-loader css-loader --save-dev
2. 配置webpack.config.js
具體配置可以查看webpack提供的例子，主要依賴的是babel-loader
babel-loader上也有webpack.config.js應該如何編寫的例子，傳送門: babel-loader
3. 編寫我們的文件(例如: demo-antd.jsx)
只使用了antd提供的Button組件。只使用了antd提供的Button組件。
ps: 對比
import { Button } from 'antd';
和
import Button from 'antd/lib/button';
後者不會將antd中所有的內容都引入，如果你只是需要Button這么一種組件的話，推薦使用後一種寫法。
4. 執行構建
webpack ./demo-antd.jsx demo-antd-bundle.js
將生成demo-antd-bundle.js文件
5. 在頁面中引入bundle文件(demo-antd-bundle.js)
執行到這一步，在瀏覽器中查看頁面可以應該可以看到一個原生樣式的button元素，因為antd並沒有將樣式使用內聯style的方式寫入js文件中。
這里我們暫時將問題一擱置，來看看問題二：組件庫的內部機制。
因為沒有深入去看過antd的源代碼，沒法詳細說明antd的在代碼編寫上的一些....怎麼說，就是『代碼為什麼這樣寫』這個問題，有興趣的話，可以去查看源碼，查看github上的代碼比npm下載後的代碼更舒服。
『肆』 react 怎麼把後端返回的html文件打開預覽
去窗口找試圖，能夠自己調節為工作模式，就會有代碼即時預覽
『伍』 如何啟動react文件
如何啟動react項目
1、首先打開命令提示符工具
開始——菜單——運行——cmd
2、然後使用cd命令進入項目目錄
cd my-app
3、接著運行npm start即可
註：如果項目目錄中沒有node_moles文件夾，需要先安裝依賴
npm install
npm start和 npm run start是等效關系，在一個npm管理項目中，一般默認有start的定義，且會經常使用，所以就在npm執行中簡化輸入目的設置了npm run start的簡寫，類似的還有npm stop、npm test等等。而其他的一些不太通用的命令項則只能通過npm run <命令項>的形式執行。
『陸』 react create app怎麼引用public的文件
說說React
一個組件，有自己的結構，有自己的邏輯，有自己的樣式，會依賴一些資源，會依賴某些其他組件。比如日常寫一個組件，比較常規的方式：
－ 通過前端模板引擎定義結構
－ JS文件中寫自己的邏輯
－ CSS中寫組件的樣式
－ 通過RequireJS、SeaJS這樣的庫來解決模塊之間的相互依賴，
那麼在React中是什麼樣子呢？
結構和邏輯
在React的世界裡，結構和邏輯交由JSX文件組織，React將模板內嵌到邏輯內部，實現了一個JS代碼和HTML混合的JSX。
結構
在JSX文件中，可以直接通過 React.createClass 來定義組件：
var CustomComponent = React.creatClass({
render: function(){
return (<div className="custom-component"></div>);
}
});
通過這種方式可以很方便的定義一個組件，組件的結構定義在render函數中，但這並不是簡單的模板引擎，我們可以通過js方便、直觀的操控組件結構，比如我想給組件增加幾個節點：
var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return (<span>{str}</span>);
});
return (<div className="custom-component">{$nodes}</div>);
}
});
通過這種方式，React使得組件擁有靈活的結構。那麼React又是如何處理邏輯的呢？
邏輯
寫過前端組件的人都知道，組件通常首先需要相應自身DOM事件，做一些處理。必要時候還需要暴露一些外部介面，那麼React組件要怎麼做到這兩點呢？
事件響應
比如我有個按鈕組件，點擊之後需要做一些處理邏輯，那麼React組件大致上長這樣：
var ButtonComponent = React.createClass({
render: function(){
return (<button>屠龍寶刀，點擊就送</button>);
}
});
點擊按鈕應當觸發相應地邏輯，一種比較直觀的方式就是給button綁定一個 onclick 事件，裡面就是需要執行的邏輯了：
function getDragonKillingSword() {
//送寶刀
}
var ButtonComponent = React.createClass({
render: function(){
return (<button onclick="getDragonKillingSword()">屠龍寶刀，點擊就送</button>);
}
});
但事實上 getDragonKillingSword() 的邏輯屬於組件內部行為，顯然應當包裝在組件內部，於是在React中就可以這么寫：
var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送寶刀
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
}
});
這樣就實現內部事件的響應了，那如果需要暴露介面怎麼辦呢？
暴露介面
事實上現在 getDragonKillingSword 已經是一個介面了，如果有一個父組件，想要調用這個介面怎麼辦呢？
父組件大概長這樣：
var ImDaddyComponent = React.createClass({
render: function(){
return (
<div>
//其他組件
<ButtonComponent />
//其他組件
</div>
);
}
});
那麼如果想手動調用組件的方法，首先在ButtonComponent上設置一個 ref="" 屬性來標記一下，比如這里把子組件設置成 <ButtonComponent ref="getSwordButton"/> ，那麼在父組件的邏輯里，就可以在父組件自己的方法中通過這種方式來調用介面方法：
this.refs.getSwordButton.getDragonKillingSword();
看起來屌屌噠~那麼問題又來了，父組件希望自己能夠按鈕點擊時調用的方法，那該怎麼辦呢？
配置參數
父組件可以直接將需要執行的函數傳遞給子組件：
<ButtonComponent clickCallback={this.getSwordButtonClickCallback}/>
然後在子組件中調用父組件方法：
var ButtonComponent = React.createClass({
render: function(){
return (<button onClick={this.props.clickCallback}>屠龍寶刀，點擊就送</button>);
}
});
子組件通過 this.props 能夠獲取在父組件創建子組件時傳入的任何參數，因此 this.props 也常被當做配置參數來使用
屠龍寶刀每個人只能領取一把，按鈕點擊一下就應該灰掉，應當在子組件中增加一個是否點擊過的狀態，這又應當處理呢？
組件狀態
在React中，每個組件都有自己的狀態，可以在自身的方法中通過 this.state 取到，而初始狀態則通過 getInitialState() 方法來定義，比如這個屠龍寶刀按鈕組件，它的初始狀態應該是沒有點擊過，所以 getInitialState 方法裡面應當定義初始狀態 clicked: false 。而在點擊執行的方法中，應當修改這個狀態值為 click: true ：
var ButtonComponent = React.createClass({
getInitialState: function(){
//確定初始狀態
return {
clicked: false
};
},
getDragonKillingSword: function(){
//送寶刀
//修改點擊狀態
this.setState({
clicked: true
});
},
render: function(){
return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
}
});
這樣點擊狀態的維護就完成了，那麼render函數中也應當根據狀態來維護節點的樣式，比如這里將按鈕設置為 disabled ，那麼render函數就要添加相應的判斷邏輯：
render: function(){
var clicked = this.state.clicked;
if(clicked)
return (<button disabled="disabled" onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
else
return (<button onClick={this.getDragonKillingSword}>屠龍寶刀，點擊就送</button>);
}
小節
這里簡單介紹了通過JSX來管理組件的結構和邏輯，事實上React給組件還定義了很多方法，以及組件自身的生命周期，這些都使得組件的邏輯處理更加強大
資源載入
CSS文件定義了組件的樣式，現在的模塊載入器通常都能夠載入CSS文件，如果不能一般也提供了相應的插件。事實上CSS、圖片可以看做是一種資源，因為載入過來後一般不需要做什麼處理。
React對這一方面並沒有做特別的處理，雖然它提供了Inline
Style的方式把CSS寫在JSX裡面，但估計沒有多少人會去嘗試，畢竟現在CSS樣式已經不再只是簡單的CSS文件了，通常都會去用Less、
Sass等預處理，然後再用像postcss、myth、autoprefixer、cssmin等等後處理。資源載入一般也就簡單粗暴地使用模塊載入器
完成了
組件依賴
組件依賴的處理一般分為兩個部分：組件載入和組件使用
組件載入
React沒有提供相關的組件載入方法，依舊需要通過 <script> 標簽引入，或者使用模塊載入器載入組件的JSX和資源文件。
組件使用
如果細心，就會發現其實之前已經有使用的例子了，要想在一個組件中使用另外一個組件，比如在 ParentComponent 中使用 ChildComponent ，就只需要在 ParentComponent 的 render() 方法中寫上 <ChildComponent /> 就行了，必要的時候還可以傳些參數。
疑問
到這里就會發現一個問題，React除了只處理了結構和邏輯，資源也不管，依賴也不管。是的，React將近兩萬行代碼，連個模塊載入器都沒有提供，更與Angularjs，jQuery等不同的是，他還不帶啥腳手架…沒有Ajax庫，沒有Promise庫，要啥啥沒有…
虛擬DOM
那它為啥這么大？因為它實現了一個虛擬DOM（Virtual DOM）。虛擬DOM是干什麼的？這就要從瀏覽器本身講起
如我們所知，在瀏覽器渲染網頁的過程中，載入到HTML文檔後，會將文檔解析並構建DOM樹，然後將其與解析CSS生成的CSSOM樹一起結合產
生愛的結晶——RenderObject樹，然後將RenderObject樹渲染成頁面（當然中間可能會有一些優化，比如RenderLayer樹）。
這些過程都存在與渲染引擎之中，渲染引擎在瀏覽器中是於JavaScript引擎（JavaScriptCore也好V8也好）分離開的，但為了方便JS
操作DOM結構，渲染引擎會暴露一些介面供JavaScript調用。由於這兩塊相互分離，通信是需要付出代價的，因此JavaScript調用DOM提
供的介面性能不咋地。各種性能優化的最佳實踐也都在盡可能的減少DOM操作次數。
而虛擬DOM幹了什麼？它直接用JavaScript實現了DOM樹（大致上）。組件的HTML結構並不會直接生成DOM，而是映射生成虛擬的
JavaScript DOM結構，React又通過在這個虛擬DOM上實現了一個 diff
演算法找出最小變更，再把這些變更寫入實際的DOM中。這個虛擬DOM以JS結構的形式存在，計算性能會比較好，而且由於減少了實際DOM操作次數，性能會
有較大提升
『柒』 react public 裡面的index.html 和 manifest 被我刪了 怎麼還原回來
你是直接銷毀了還是刪除，刪除撤回就行了，銷毀的話可能要從新來了
『捌』 React引用圖片不顯示的問題
用create-react-app腳手架搭建好react項目之後嗎，引用圖片的時候發現路徑是正確的，圖片不顯示，後來查了查原來跟我 圖片放的位置 有關系
我的圖片放在了src下的assets的img文件夾中，這樣的話，查了一下，這種情況下直接用src會出現問題但是用require是可以的
注意：require中只能放字元串，不能放變數
後來看了看create-react-app的官網，官網明確說出最好將圖片樣式等放在public文件夾中，是可以用的<img src="../images/photo.png"/>這種形式的
如下圖官網：
Using the Public Folder · Create React App
改裝後的文件夾如下，將圖片放在了public文件夾中：
這樣就可以用了~
記錄自己遇到的問題，僅供學習參考
原文鏈接： https://zhuanlan.hu.com/p/55487754
『玖』 百度百科 react怎樣寫公共的方法
react to
1.對…作出反應
2.對…起反應
3.起反應
4.對……反應
react (to)
1.起反應
react to respond to
1.對…做出反應
respond to react to
1.對…做出反應
react to sth
1.對…反應
2.對…作出反應
『拾』 react-router路由配置怎麼訪問
以下是我做的一個案例的route配置信息，他是用來鏈接你的每個頁面的，簡單點就是超鏈接裡面的一個關鍵id一樣，來識別頁面的屬性，path屬性就是鏈接裡面要引用的, 例如：http://localhost:3000/#/recharge?_k=3l0sz9。這里的recharge就是path屬性。 import React from 'react'; import { Route } from 'react-router'; /* containers */ import { App } from 'containers/App'; import { Home } from 'containers/Home'; import { Activity } from 'containers/Activity'; import { List } from 'containers/List'; import { UserInfomation } from 'containers/User/UserInfomation'; import { UserMain } from 'containers/User/UserMain'; import { Recharge } from 'containers/User/Recharge'; import { Rules } from 'containers/Rules/Rules'; import { Ordered } from 'containers/Order/Ordered'; export default ( <Route path="/" component={App}> <Route path="home" component={Home} /> <Route path="list" component={L