一、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;