React总结7：render()渲染时机

根据官网表示，JSX是属于一种不可变的对象，即只要一创建就不能被改变，继续我们c++，Java中的字符串一样，是属于常量范围，不容许改变，不能改变属性啊，孩子节点也不可以改变，这个元素就像电影中的某一帧，是处于一个确定的时间点上，不管你放多少遍它都不会发生改变。

function tick() {
  const el = (
    

      
Hello, world!
      
It is {new Date().toString()}.
    
  );
  ReactDOM.render(
    el,
    document.getElementById('root')
  );
}
setInterval(tick, 1000);

通过这份代码大家就知道了，如果你要改变root容器中的内容，只能用render重新覆盖了。

这里大家需要知道一个常识，对于大多数React应用而言，React.render()通常只会调用一次，有趣，说好的需要覆盖重复调用呢。

在React建立和将内部的数据呈现给视图的过程中，React做了如下的事情：通过在真实DOM和React应用之间建立一个过渡层，这个过渡层有时被称为”虚拟DOM“。虽然不是DOM，但是有着和DOM一样的机制处理，几乎所有的操作都会先在虚拟DOM上进行处理，最后才更新到DOM节点上的

React渲染DOM节点时，只会渲染改变了的节点，如上面显示时间的代码，它只会更新大括号中的内容，其他的它不会改变，怎么实现的呢？

当组件的属性或者状态发生改变时，React会比较旧的DOM和新的DOM是不是不同，来确定更新当前DOM节点的必要性，如果不同的话，React就会更新这个DOM节点

这样非常有效的减少了reflow和repaint渲染，之所以可以这么做的原因，是因为他们是公共的根节点，就是说改变之前的节点的根节点和当前我要更新的根节点处于同一节点，我们通过递归比较就可以知道有没有发生改变。

在我们写代码的过程中我们可以通过一个函数去控制当前的组件是否需要进行更新，什么时候一定要更新，什么时候不更新。这个函数叫做shouldComponentUpdate生命周期更新函数，这个函数会发生在重新render视图渲染之前，此函数在React中默认是返回true，然后会执行render函数进行更新。

总结：

react render渲染的几种情况
1. 首次加载
2. setState改变组件内部state。 
注意： 此处是说通过setState方法改变。
3. 接受到新的props