react 小技巧

react 相关

### 1.关于Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.的解决方案
```language
a.一、在卸载的时候对所有的操作进行清除（例如：abort你的ajax请求或者清除定时器）

componentWillUnMount = () => {
    //1.ajax请求
    $.ajax.abort()
    //2.定时器
    clearTimeout(timer)
}

b.设置一个flag，当unmount的时候重置这个flag
componentDidMount = () => {
    this._isMounted = true;
    $.ajax('你的请求',{})
        .then(res => {
            if(this._isMounted){
                this.setState({
                    aa:true
                })
            }
        })
        .catch(err => {})
}
componentWillUnMount = () => {
    this._isMounted = false;
}

c.万金油?_?

componentWillUnmount = () => {
    this.setState = (state,callback)=>{
      return;
    };
}
```

### 组件/图片懒加载

```language
npm install react-lazyload --save-dev
使用：

//引入
import LazyLoad from ‘react-lazyload‘;

//render中使用
render(){
	<LazyLoad height={200}>
		<img src="tiger.jpg" />
	</LazyLoad>
}

```
[https://segmentfault.com/a/1190000010640236](https://segmentfault.com/a/1190000010640236)

### react判断资源加载完成显示页面...
```language
function listen () {
    if (document.readyState == 'complete') { // 资源加载完成
        ReactDom.render(
            <Provider rootStore={new RootStore()}>
                <BrowserRouter>
                    <Switch>
                        <Route path='/home_index' exact component={Index}></Route>
                        <Route path='/login' component={Login}></Route>
                        <Route path='/mine' component={MineIndex}></Route>
                        <Route path='/test' component={Test}></Route>
                        <Redirect to='/home_index'></Redirect>
                    </Switch>
                </BrowserRouter>
            </Provider>,
            document.getElementById('root')
        )
    } else { // 资源加载中
        ReactDom.render(
            <Provider rootStore={new RootStore()}>
                <BrowserRouter>
                    <Switch>
                        <Route path='/' component={Test}></Route>
                    </Switch>
                </BrowserRouter>
            </Provider>,
            document.getElementById('root')
        )
    }
}

document.onreadystatechange = listen
```

### 路由拦截

```language
https://www.jianshu.com/p/340c9b5e31c3?from=timeline


https://blog.csdn.net/przlovecsdn/article/details/82258872

微信授权//https://www.cnblogs.com/0201zcr/p/5131602.html
```