React学习打卡Day04

1.富文本展示
        dangerouslySetInnerHTML={ { __html:item.text } }，可以将输入得html命令执行后展示
2.函数表达书可以写在return的div标签中，写在花括号内
3.在组件中使用constructor函数构建组件信息，使用axios库获取接口数据，代码如下

    constructor(){
        super();
        //axios 第三方的库，专门用于请求数据
        //axios.get("请求地址").then(res=>{}).catch(err=>{});
        /*axios.get("https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=9337305").then
        (res=>{
            console.log(res)
        }).catch(err=>{})*/
        axios({
            url:"https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=9337305",
            headers:{
                "X-Client-Info": {"a":"3000","ch":"1002","v":"5.2.0","e":"16484473491588798597103617","bc":"110100"},
                "X-Host": "mall.film-ticket.cinema.list"
            }
        }).then(res=>{console.log(res.data)})
    }

3.input标签中的onInput属性可以监听输入内容的改变，event会自动保存输入的内容，采用event.target.value获取，代码如下，其中使用filter过滤不影响原数组，直接返回新数组

 <input onInput={this.handleInput}></input>
  //以下代码写在render外部  
handleInput(event){
        console.log(event.target.value)
    }

4.连续调用setState，不会引发多次虚拟dom处理，合并处理
        1）setState处在同步的逻辑中，会异步更新状态，异步更新真实dom
        2）setState处在异步的逻辑中，会同步更新状态，同步更新真实dom
        3）setState源码内部有同异步判断标志，如果处于同步中，标志置于true，合并操作，反之为false，不合并
        4）setState接受第二个参数，第二个参数是回调函数，状态和dom更新完后就会被触发
        5）可将setState函数置于setTimeout函数中，设置时间为0，实现同步效果，或者将执行函数置于setState函数的回调函数中，代码如下

//方案1        
this.setState({
            list:list
        },()=>{
            new BetterScroll(".wrapper")
        })
//方案2
setTimeout(() => {
            this.setState({
                list:list
            })
        }, 0);

5.使用better-scroll包进行滚动控制，通过两个div和new BScrol进行控制，代码如下
 

import BScroll from 'better-scroll';
<div className="wrapper" style={{height:'500px',background:'yellow',overflow:"hidden"}}>
    <div className="content">
    </div>
</div>
this.setState({
            cinemaList:newlist
        },()=>new BScroll('.wrapper'))