react学习（二）

一、react虚拟dom-----减少真实dom的创建和虚拟dom的对比，比较js对象不耗性能，但是比较dom是非常耗费性能的。

   1.state数据

   2.jsx模板

   4.数据+模板结合,生成虚拟dom(虚拟dom是一个js对象，用它来描述真实的dom)

      <div id="abc"><div>

      ['div',{id:'abc'}]

3.，根据虚拟dom生成真实dom,来显示

   5.state发生变化

   6.数据+模板，生成新的虚拟dom（极大提升了性能）

      <div id="abc">hello<div>

      ['div',{id:'abc'},'hello']

   7.比较原始虚拟dom和新的虚拟dom的区别，找到区别

   8.直接操作dom,改变内容

二、虚拟dom的diff算法

虚拟dom比对的过程会用到diff算法。

setstate是异步的，原因在于为提高react底层性能，如果在较短时间有3次setstate变更3组数据,react可以合并为一次setstate,只会做一次虚拟dom,省去其他两次比对。

一层层对比，要是第一层不一样，就会重新替换掉下一层的dom。

在循环中，key最好不要是index,因为无法保证新旧虚拟dom的key值是一致的,比如删除掉一个元素。

三、ref的用法

尽量少用ref,因为有时和setState连用时更新了数据，但是获取的不正确。可以写在setstate的第二个函数里。

 

import React,{Component} from 'react';

import {CSSTransition} from 'react-transition-group'

class Test extends Component{

    constructor(props){

        super(props)

        this.state={

            inputValue:''

        }

       this.handleChange=this.handleChange.bind(this)

    }

    render(){

        return (

            <Fragment>

                <div>

                    <input vulue={this.state.inputValue}

                    onChange={this.handleChange}

                    ref={(input)=>{this.input=input}}

                    ></input>

                </div>

                <p>world</p>

            </Fragment>

        )

    }

    handleChange(){

        const value=this.input.value;

        this.setState(()=>{

            inputValue:value

        })

    }

}

export default Test;