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

 

 

 

后续,工作中遇到再学再写