react 爬坑記錄

1.父子組件優化其一
發生render條件:數據改變(state或者props改變),有時子組件會過多render.這時可在子組件裏面的生命週期鉤子裏執行

shouldComponentUpdate(nextProps,nextState){
  if(nextProps.context !== this.props.context){
  　　　　return true;  
　　}else{
　　　　 return false;
　　}
}

來減小沒必要要的render.

2.優化其一:

儘可能把bing放在constructor裏面或者使用箭頭函數

3.優化其二:
把只有render函數的組件改成無狀態組件,能夠減小不少生命週期函數的調用.

4.使用styled-components引入injectGlobal報錯. 

由於最新的版本已經去除了injectGlobal.能夠改成

import {createGlobalStyle} from 'styled-components';

export const GlobalStyled = createGlobalStyle`
body{
    margin:0;
    padding:0;
    background:red;
}`

 

 5.使用react-router-dom的Link跳轉時,發生

Error: Invariant failed: You should not use <Link> outside a <Router>

 顧名思義,該組件須要放在BrowserRouter裏面才能使用Link

 

 

 

後續,工做中遇到再學再寫