react学习（二）
一、react虚拟dom-----减少真实dom的创建和虚拟dom的对比，比较js对象不耗性能，但是比较dom是非常耗费性能的。
1.state数据
2.jsx模板
4.数据+模板结合,生成虚拟dom(虚拟dom是一个js对象，用它来描述真实的dom)
['div',{id:'abc'}]
3.，根据虚拟dom生成真实dom,来显示
5.state发生变化
6.数据+模板，生成新的虚拟dom（极大提升了性能）
hello
)
}
handleChange(){
const value=this.input.value;
this.setState(()=>{
inputValue:value
})
}
}
export default Test;
['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 (
{this.input=input}}
>
world