setState的同步和异步和betterScroll 使用

1. setState的异步和同步使用

setState 处于同步的逻辑中， 异步更新状态，更新真实DOM
setState 处于异步的逻辑中，同步更新状态，同步更新真实DOM
setState 接受第二个参数，第二个参数回调函数，状态和dom更新完后就会被触发

import React, { Component } from 'react'
export default class App extends Component {
    state = {
        count:1
    }
  render() {
    return (
        <div>
            {/* 页面展示2 */}
            {this.state.count} 
            <button onClick={this.handleClick1}>Add</button>
            <button onClick={this.handleClick2}>Add</button>
      </div>
    )
    }
    handleClick1=()=> {
        this.setState({ count: this.state.count + 1 }, () => {
            console.log(this.state.count)    //2
        })  
        console.log(this.state.count)                  //1
    }
    handleClick2 = () => {
        setTimeout(() => {
            this.setState({ count: this.state.count + 1 })  
            console.log(this.state.count)            //2
        },0)
    }
}

2.0 better-scroll 页面浏览器滚动条的使用

https://github.com/linYeeTracy/betterScroll

#安装
npm i better-scroll

better scroll是一个插件，旨在解决移动端的滚动情况（将来可能支持PC端）。
核心部分的灵感来自于iscroll的实现，因此better scroll的API总体上与iscroll兼容。
此外，better scroll还基于iscroll扩展了一些功能并优化了性能。
better scroll是用纯JavaScript实现的，这意味着它没有依赖关系。
编译代码的大小为46KB，压缩后为26KB，gzip后仅为7KB。better scroll是一个非常轻量级的JavaScript库。

import React, { Component } from 'react'
import BetterScroll from 'better-scroll'
export default class App extends Component {
    state = {
        list: []
    }
    render() {
        return (
            <div>
                <button onClick={() => this.getData()}>click</button>
                   <div className="divWarp" style={{"height":"200px","background":"orange","overflow":"hidden"}}>
                        <ul className="ulNorp">
                            {
                                this.state.list.map(item => <li key={item}>{item}</li>)
                            }
                        </ul>
                    </div>
            </div>
        )
    }
    getData() {
        var list = [1, 2, 3, 4, 5, 6, 7,8,9,10,11,12,13]
        this.setState({ list: list }, () => {
            new BetterScroll(".divWarp")
        })
    }
}