render渲染

react实际渲染更新过程（reactElement、diff、setState)

一个模块中props，data中存在同名的变量，会渲染哪一个，为什么？

react结合immutable.js为什么能提高渲染效率

---

性能和渲染（Render）正相关

React基于虚拟DOM和高效Diff算法的完美配合，实现了对DOM最小粒度的更新。在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，很重要的一个方向就是避免不必要的渲染（Render）。

渲染（Render）时影响性能的点

React的处理render的基本思维模式是每次一有变动就会去重新渲染整个应用。在Virtual DOM没有出现之前，最简单的方法就是直接调用innerHTML。

render返回的是一个什么？

VirtualDOM厉害的地方并不是说它比直接操作 DOM快，而是说不管数据怎么变，都会尽量以最小的代价去更新DOM。React将render函数返回的虚拟DOM树与老的进行比较，从而确定DOM要不要更新、怎么更新。当DOM树很大时，遍历两棵树进行各种比对还是相当耗性能的，特别是在顶层 setState一个微小的修改，默认会去遍历整棵树。尽管React使用高度优化的Diff算法 ，但是这个过程仍然会损耗性能。

---

触发render条件

1.组件挂载

React组件构建并将DOM元素插入页面的过程称为挂载。当组件首次渲染的时候会调用render，这个过程不可避免。

2.setState方法被调用（组件或父组件中）

通常情况下，执行setState会触发 render。但是执行setState的时候一定会重新渲染吗？不一定，当setState传入null的时候，并不会触发render。

3.父组件重新渲染

react父节点数据变了，但传给子节点的没变，子节点变不变？

只要父组件重新渲染了，即使传入子组件的props未发生变化，子组件也会重新渲染进而触发render。

如何在数据不变的情况下阻止子节点render？

4.调用组件中的forceUpdate

---

优化Render

当子组件过多或者组件的层级嵌套过深时，反反复复重新渲染状态没有改变的组件，可能会增加渲染时间又会影响用户体验，此时就需要对render进行优化。

上面说了不必要的render会带来性能问题，因此主要优化思路就是减少不必要的render。

---

第一次进入到页面的时候，会在没数据的情况下有一次渲染；等fetch成功后会再一次进行渲染。怎么解决第一次进入页面没数据的情况下，页面渲染时不报错?

1.给定同fetch回来的数据格式一样的默认数据，数组使用空数组，对象则属性都需要存在，值为默认值或者空值。

2.思路是条件渲染，设置一个判断条件，条件值不同，渲染的组件不同。

constructor(){

    this.state = {

        isLoading = true,

        data: []

    }

}

render(){

    return (

        {

            this.state.isLoading

            ? <Loading />

            : <Content />

        }

    )

}