如何避免重复渲染分为三个步骤：选择优化时机、定位重复渲染的问题、引入解决方案。

    优化时机需要根据当前业务标准与页面性能数据分析，来决定是否有必要。如果卡顿的情况在业务要求范围外，那确实没有必要做；如果有需要，那就进入下一步——定位。

    定位问题首先需要复现问题，通常采用还原用户使用环境的方式进行复现，然后使用 Performance 与 React Profiler 工具进行分析，对照卡顿点与组件重复渲染次数及耗时排查性能问题。

    通常的解决方案是加 PureComponent 或者使用 React.memo 等组件缓存 API，减少重新渲染。但错误的使用方式会使其完全无效，比如在 JSX 的属性中使用箭头函数，或者每次都生成新的对象，那基本就破防了。

    针对这样的情况有三个解决方案：

    缓存，通常使用 reselect 缓存函数执行结果，来避免产生新的对象；

    不可变数据，使用数据 ImmutableJS 或者 immerjs 转换数据结构；

    手动控制，自己实现 shouldComponentUpdate 函数，但这类方案一般不推荐，因为容易带来意想不到的 Bug，可以作为保底手段使用。

    通过以上的手段就可以避免无效渲染带来的性能问题了。