1、怎么避免多次触发Render？

React 基于虚拟 DOM 和高效 Diff 算法的完美结合，实现了对 DOM 最小粒度的分别更新。大多数情况下，React 对 DOM 的渲染效率足以应付我们日常。但在个别复杂业务场景下，性能问题依然会困扰我们。此时需要采取一些措施来提升运行性能，其中最重要的一个方向就是避免不必要的渲染(Render)

shouldComponentUpdate 和 PureComponent

在 React 类组件中，可以利用 shouldComponentUpdate 或者 PureComponent 来减少因父组件更新而触发子组件的 render，从而达到的。shouldComponentUpdate 来决定组件是否重新渲染，如果不希望组件重新渲染，返回 false 即可

• shouldComponentUpdate:(nextProps,nextState)在内部可以判断组件外部接受的最新属性与之前的属性是否一致，从而约束 render 刷新的时机。只要结果返回 true，render 就会立马执行渲染更新，返回 false 就代表 render 不会执行
• PureComponent:内部机制是通过浅比较去实现的。PureComponent 代表纯组件，纯组件内部是不能再去复写 shouldComponentUpdate 这个钩子函数。内部进行来进行性能优化。如果是值比较的话，外部传入的属性与内部的属性不一样的话才会进行 render 更新操作。如果是引用地址比较的话，例如数组，之前的属性数组的地址与更改后的新的数组的地址一致，那么就不会进行 render 的更新操作

  利用高阶组件

  在函数组件并没有 shouldComponentUpdate 这个生命周期，可以利用高阶组件，封装一个类似 PureComponent 的功能

  使用 React.memo

  React.memo 是 React16.6 新的一个 api，用来缓存组件的渲染，避免不必要的更新。React.memo 其实是一个高阶组件与 PureComponent 十分类似，但是不同的是，React.memo 只能用于函数组件

  合理拆分组件

  微服务的核心思想：以更轻、更小的粒度来纵向拆分应用，各个小应用能够独立选择技术、发展、部署。我们在开发组件的过程中也要用到类似的思想。试想当一个整个页面只有一个组件时，无论哪处改动都会触发整个页面的重新渲染。在对组件进行拆分之后，render 的粒度更加精细，性能也能得到一定的提升。