React中父组件如何避免因自身更新导致子组件频繁重复渲染？

本文共计1822个文字，预计阅读时间需要8分钟。

目录 + React前端渲染优化--父子组件导致子组件重复渲染 + 说明 + 优化方式 + 项目中常见会导致重复渲染的写法及改进方法 + 组件重复渲染问题（pureComponent, React.memo, useMemo, useCallback） + rend

目录

• React前端渲染优化--父组件导致子组件重复渲染
• 说明
• 一般的优化方式
• 项目中常见会导致重复渲染的写法以及改进方法
• 组件重复渲染问题(pureComponent, React.memo, useMemo, useCallback)
• render执行会带来两个方面的影响
• 下面将具体说明这几个都使用场景和解决的问题

React前端渲染优化--父组件导致子组件重复渲染

说明

目前我们所使用 react 版本一般会有以下四种方式触发渲染 render，而其中通过父组件 render 会直接通知子组件也进行 render。

一般的优化方式

鉴于此种情况，如果完全不做控制下，父组件 render, 那么子组件一定会 render。真实 dom 的渲染 react 会在 diff 算法之后合计出最小改动，进行操作。但对于结构复杂页面，自顶向下，只是单纯 diff 也要花费很长的时间来处理 js 任务。