React re-render

What is?

react的渲染分为两个阶段:

  • render,组件第一次出现在屏幕上的时候触发
  • re-render, 组件第一次渲染之后的渲染

当app的数据更新时(用户手动更新、或异步请求)。

When?

re-render发生有四种可能:

  1. state改变: 所有re-render的根源
  2. 父组件渲染
  3. 上下文改变: 全局变量的改变会引起所有使用此变量的组件

Reconciliation

Reconciliation被称为diff算法,用来比较两个React元素树的差异,提高渲染的效率,尽可能复用现有的组件和DOM。

通过比较元素的type和key相同就复用,否则就销毁和新建。

Props

改变props需要父组件更新,子组件无法改变props

optimise

  • 在组件中创建组件,将会极大的拖慢渲染速度。可能会引起闪烁、非期望的状态重置、useeffect不触发依赖、失去焦点等问题。
  • 把state尽可能的移动到子组件中
  • 将A组件作为props传给B组件,B组件的渲染不会带来A的渲染
  • 使用React.memo,防止渲染
相关推荐
咬人喵喵11 分钟前
CSS Flexbox:拥有魔法的排版盒子
前端·css
LYFlied12 分钟前
TS-Loader 源码解析与自定义 Webpack Loader 开发指南
前端·webpack·node.js·编译·打包
yzp011213 分钟前
css收集
前端·css
暴富的Tdy14 分钟前
【Webpack 的核心应用场景】
前端·webpack·node.js
遇见很ok14 分钟前
Web Worker
前端·javascript·vue.js
elangyipi12315 分钟前
JavaScript 高级错误处理与 Chrome 调试艺术
开发语言·javascript·chrome
风舞红枫17 分钟前
前端可配置权限规则案例
前端
前端不太难19 分钟前
RN Navigation vs Vue Router:从架构底层到工程实践的深度对比
javascript·vue.js·架构
zhougl99627 分钟前
前端模块化
前端
暴富暴富暴富啦啦啦43 分钟前
Map 缓存和拿取
前端·javascript·缓存