持續(xù)更新中......
初始化項目參考
A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
參考：
初始化項目參考 https://github.com/react-boilerplate/react-boilerplate
reselect http://www.reibang.com/p/6e38c66366cd
reselect https://github.com/reduxjs/reselect
immutable http://react-china.org/t/react-redux-immutablejs/9948
immutable https://blog.csdn.net/sinat_17775997/article/details/73603797
immutable http://facebook.github.io/immutable-js/docs/#/List/insert
react-immutable-proptypes https://github.com/HurricaneJames/react-immutable-proptypes
關(guān)于 redux-saga 使用的理解
因為 redux 存放的是全局數(shù)據(jù)，因此局部數(shù)據(jù)不應(yīng)該放在 redux 中，否則會出現(xiàn)大量的 reset 作用的 action 赃份，來保證系統(tǒng)看起來不會很奇怪硅蹦，這明顯是不合適的摄咆。
以下內(nèi)容很好的解釋了我的理解：
Redux store vs React state
試想一種情況翔冀，我們做一個 todo 應(yīng)用，需要展示 todo 的列表瓦阐，也要對單獨
的 todo 進行分別編輯蜗侈，那么 store 和 state 的設(shè)計無非就是如下兩種：
無法顯示圖片
前面這種，將單獨的 todo 的狀態(tài)放在了 store 里睡蟋，而后面這種是放在了 todo
組件的局部的 state 里踏幻。
一般來講推薦后面這種，原因有二：
1. todo 組件是復(fù)用的戳杀，如果放在 store 里该面，在 SPA 的應(yīng)用中，每次進入都
要**重置狀態(tài)**信卡；
2. 用作局部的 state隔缀，使得維護起來更加方便，因為在這個 case 里傍菇，對
todo 的臨時操作**并不影響全局**猾瘸。
在提交每個 todo 的時候，肯定要派發(fā) store 中的 action（因為提交后整個
todolist 都會全局性的改變）丢习。如果用前一種方案牵触，todo 組件必然和 store 綁
定在了一起，所以可以在 todo 組件內(nèi)部去 dispatch action咐低。而對于后者揽思，則
應(yīng)該是通過 todolist 傳入的回調(diào)方法去添加或者更新 todo 信息。
總結(jié)一下就是见擦，使用前一種方式就不要畫蛇添足通過父子組件傳遞回調(diào)的方
式去派發(fā)事件钉汗，因為 todo 組件已經(jīng)不是獨立的組件了，已經(jīng)耦合到大的系統(tǒng)
里了锡宋，沒必要增加復(fù)雜度了儡湾。而使用后一種方式就不要直接派發(fā)事件給
store特恬，因為后一種方式的子組件本來設(shè)計思路就是解耦的执俩。
XXX里的高票回答得很好：
Use React for ephemeral state that doesn't matter to the app globally
and doesn't mutate in complex ways. For example, a toggle in some UI
element, a form input state. Use Redux for state that matters globally or is
mutated in complex ways. For example, cached users, or a post draft.
Sometimes you'll want to move from Redux state to React state (when
storing something in Redux gets awkward) or the other way around (when
more components need to have access to some state that used to be local).
The rule of thumb is: do whatever is less awkward.
簡而言之就是，如果這個狀態(tài)不影響其他部分的業(yè)務(wù)邏輯并且足夠簡單癌刽，就使用 react state役首。
應(yīng)該在什么位置獲取異步數(shù)據(jù)
問：是不是所有的異步數(shù)據(jù)都要在 store 的 action 中獲取显拜？
答案是：否衡奥！前面那個小節(jié)已經(jīng)講過了局部 state 和全局 store 的關(guān)系，如何
選擇完全看數(shù)據(jù)是否和全局有關(guān)聯(lián)远荠。推此即彼矮固，異步數(shù)據(jù)的獲取也同樣。
如果獲取到的數(shù)據(jù)是用來更新全局狀態(tài)，那么當(dāng)然要放在 store 的 action里档址。否則盹兢，直接在組件內(nèi)部調(diào)用封裝好的異步請求去改變局部的 state 就可以了。
參考：
http://react-china.org/t/react-redux-immutablejs/9948
react-router
如果兩個頁面 A守伸、B绎秒，從A跳轉(zhuǎn)到B，從B 返回后尼摹，A要保留進入B前的狀態(tài)见芹，那么B應(yīng)該嵌套在A中，否則蠢涝，A會被卸載玄呛，導(dǎo)致無法保留相關(guān)狀態(tài)。
參考：
react-router http://reacttraining.cn/web/example/auth-workflow
https://github.com/reactjs/react-router-tutorial/blob/master/lessons/04-nested-routes/README.md
一個完整的react router 4.0嵌套路由的例子 https://blog.csdn.net/hsany330/article/details/78114805/
react 響應(yīng)式 （根據(jù)屏幕大小顯示不同的樣式）
css media http://www.reibang.com/p/e4bf154db32d
在IOS系統(tǒng)12.1和二，iPhone X把鉴，微信版本6.7.4，彈窗中的輸入框不好輸入儿咱，因為軟鍵盤隱藏后導(dǎo)致界面下方白屏
在代碼中判斷如果是IOS且是微信中打開的
<InputItem
onBlur={() => {
const browserVrsions = yValidate.browserVrsions();
if (
browserVrsions.weixin
&& browserVrsions.ios
) {
window.scrollTo(0, 0);
}
}}
onFocus={() => {
const browserVrsions = yValidate.browserVrsions();
if (
browserVrsions.weixin
&& browserVrsions.ios
) {
window.scrollTo(0, 150);
}
}}
/>
判斷客戶端類型工具類：
const yValidate = {
browserVrsions: () => {
const u = navigator.userAgent;
// const app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, // IE內(nèi)核
presto: u.indexOf('Presto') > -1, // opera內(nèi)核
webKit: u.indexOf('AppleWebKit') > -1, // 蘋果诊笤、谷歌內(nèi)核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐內(nèi)核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否為移動終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios終端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android終端
iPhone: u.indexOf('iPhone') > -1, // 是否為iPhone或者QQHD瀏覽器
iPad: u.indexOf('iPad') > -1, // 是否iPad
webApp: u.indexOf('Safari') === -1, // 是否web應(yīng)該程序，沒有頭部與底部
weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) === ' qq', // 是否QQ
};
},
};
export default yValidate;
參考：JS判斷客戶端是否是iOS或者Android手機移動 https://segmentfault.com/a/1190000008789985
react 項目中使用環(huán)境變量操作步驟
- package.json
"start-test": "cross-env NODE_ENV=development npm_config_1=npm_config_1 webpack-dev-server --open --config webpack.config.js",
or
"start-test": "NODE_ENV=development webpack --env.npm_config_1=npm_config_1 webpack-dev-server --open --config webpack.config.js",
- webpack.config.js
plugins: [
new webpack.DefinePlugin({
'process.env.npm_config_1': JSON.stringify(process.env.npm_config_1),
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
- use.js
console.log(process.env.npm_config_1, 'process.env.npm_config_1')
react+antd分頁 實現(xiàn)分頁及頁面刷新時回到刷新前的page https://www.cnblogs.com/cristina-guan/p/9556274.html
當(dāng)點擊按鈕后顯示隱藏層鹏浅，滿足鼠標(biāo)在div里操作不隱藏，在外邊點擊會消失的功能钳宪。邏輯上主要是阻止瀏覽器的冒泡
參考：https://codesandbox.io/embed/change-view-state-on-click-document-6sppw
javascript – 如何在React中通過ref獲取組件的位置揭北？https://codeday.me/bug/20190301/708340.html
react-router(v4) 路由跳轉(zhuǎn)后返回頁面頂部問題
遇到的問題
由A頁面跳轉(zhuǎn)到B頁面，B頁面停留在A頁面的位置吏颖，沒有返回到頂部搔体。
問題分析
首先分析下出現(xiàn)此問題的原因： 在項目中使用的是 hashHistory，它是建立在 history 之上的半醉，當(dāng)路由發(fā)生變化時會記住原路由的狀態(tài)疚俱，跳轉(zhuǎn)新頁面后默認停留在原頁面的位置。
解決方法
- 使用 withRouter缩多；
withRouter可以包裝任何自定義組件呆奕，將react-router 的 history,location,match 三個對象傳入。無需一級級傳遞react-router 的屬性衬吆，當(dāng)需要用的router 屬性的時候梁钾，將組件包一層withRouter，就可以拿到需要的路由信息逊抡。
1姆泻、定義ScrollToTop組件，代碼如下：
import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';
class ScrollToTop extends Component {
componentDidUpdate(prevProps) {
if (this.props.location !== prevProps.location) {
window.scrollTo(0, 0)
}
}
render() {
return this.props.children
}
}
export default withRouter(ScrollToTop);
2、在定義路由處引用該組件拇勃，代碼如下：
ReactDOM.render((
<HashRouter>
<ScrollToTop>
<div className="container">
<Route path={routePaths.INDEX} exact component={Index} />
<Route path={routePaths.CARD} component={Card} />
<Route path={routePaths.BASEINFO} component={BaseInfo} />
<Route path={routePaths.EDUINFO} component={EduInfo} />
<Route path={routePaths.FAMILYINFO} component={FamilyInfo} />
<Route path={routePaths.OTHERINFO} component={OtherInfo} />
<Route path={routePaths.DETAIL} component={Detail}/>
</div>
</ScrollToTop>
</HashRouter>
),
document.getElementById('app')
);
這樣就可以實現(xiàn)路由跳轉(zhuǎn)后返回頁面頂部蛾娶，問題解決！
參考：
react-router(v4) 路由跳轉(zhuǎn)后返回頁面頂部問題 https://blog.csdn.net/abcde158308/article/details/84567077
sessionStorage多標(biāo)簽頁共享
sessionStorage和localStorage區(qū)別
localStorage的生命周期是永久的潜秋，意思就是如果不主動清除蛔琅，存儲的數(shù)據(jù)將一直被保存。而sessionStorage顧名思義是針對一個session的數(shù)據(jù)存儲峻呛，生命周期為當(dāng)前窗口罗售，一旦窗口關(guān)閉，那么存儲的數(shù)據(jù)將被清空钩述。最后還有一個很主要的區(qū)別同一瀏覽器的相同域名和端口的不同頁面間可以共享相同的 localStorage寨躁，但是不同頁面間無法共享sessionStorage的信息。
解決
所以我們可以借用localStorage的改變來主動修改sessionStorage,這里要用到一個監(jiān)聽事件storage牙勘，用于監(jiān)聽localStorage
window.addEventListener("storage", function(event){
//event.key確認修改的locaStorage變化key职恳，event.newValue是修改后的值
if(event.key == "token"){
sessionStorage.setItem('token',event.newValue)
}
});
所以在登陸時直接localStorage.setItem('token','xxxxx'),這樣自動設(shè)置在了sessionStorage中，需要用到的時候直接sessionStorage.getItem('token'),其實直接使用localStorage來記錄登錄狀態(tài)什么的也可以方面，但是為了關(guān)閉頁面直接清楚token放钦，所以就在寫sessionStorage中了
END~
參考：
sessionStorage多標(biāo)簽頁共享 https://blog.csdn.net/deng1456694385/article/details/86537192
js格式化輸入框內(nèi)金額、銀行卡號[轉(zhuǎn)]
參考：
js格式化輸入框內(nèi)金額恭金、銀行卡號[轉(zhuǎn)] https://www.cnblogs.com/mmzuo-798/p/6291279.html
需求：使用 rc-form 在一個大的頁面中包含多個Form操禀，驗證如果有報錯那么滾動到報錯位置
參考：
http://www.reibang.com/p/ecc2428c9afa
需求：使TweenOne支持bignumber顯示
參考：
TweenOne數(shù)字變化 超過最大數(shù)值后，顯示錯誤解決方案 http://www.reibang.com/p/99ae4210679c
Chrome不能顯示小于12px的字體的解決辦法横腿，同時解決-webkit-transform: scale不支持行內(nèi)標(biāo)簽的問題
.forcefontsize10 {
display: inline-block;
font-size: 12px;
-webkit-text-size-adjust:none;
-webkit-transform : scale(0.83,0.83);
}
.forcefontsize8 {
display: inline-block;
font-size: 12px;
-webkit-text-size-adjust:none;
-webkit-transform : scale(0.66,0.66);
}
.forcefontsize6 {
display: inline-block;
font-size: 12px;
-webkit-text-size-adjust:none;
-webkit-transform : scale(0.5,0.5);
}
遇到的問題 react 調(diào)用this.setState()方法無效，不能改變對應(yīng)的值耿焊，也不會調(diào)用render方法揪惦，更不會渲染出預(yù)期頁面
解決方案1
this.visible = true;
this.forceUpdate();
render 中使用this.visible;
解決方案2
使用redux props里面的參數(shù)，修改該值dispatch action
參考：
避免取值時出現(xiàn)Cannot read property 'xx' of undefined
console.log(artcle?.authorInfo?.author); //Bowen
console.log(artcle?.timeInfo?.publishTime) //undefined
參考：避免取值時出現(xiàn)Cannot read property 'xx' of undefined
https://segmentfault.com/a/1190000018242053
tmp
參考：
