react的渲染机制

在做react的项目开发中，由于项目需要，自己封装了一个通过下拉框筛选得到不同数据的图表，echart没有合适的图表，就手绘了一个。图表是一个横向的柱状图，当react渲染的时候会有一个加载动画，遇到的问题是加载动画只在第一次加载~

然后让我们先回顾一下react的渲染机制，我们都知道react有一个虚拟dom的概念，当渲染的时候react会比较两个虚拟dom的节点；1.节点相同，属性不同---react会对属性进行重设，从而实现节点的转换；2.节点不同---react会直接删除之前的节点，重新绘制。ok，找到问题的原因了~那么在react中怎么去重新渲染dom呢？

有两种比较简单的方法：

1.重新绘制的时候改变你的dom结构

2.更新组件的key值，react会认为你更新了dom节点

 

 

找到问题原因之后解决起来还是比较简单的，希望对你有所帮助~

 

追加：react监听屏幕尺寸的变化

1.在componentDidMount中加入监听

window.addEventListener("resize", this.resize.bind(this));

2.在componentWillUnmount中取消监听

window.removeEventListener("resize", this.resize.bind(this));