尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

react 的生命周期函数中,当props改变时,会引发的后续 变化,rander()函数什么时候执行?

react 的生命周期函数中,当props改变时,会引发的后续 变化,rander()函数什么时候执行?
📅 发布时间:2026/6/19 0:13:01

一、当 props 改变时,组件会触发哪些生命周期?

以 class 组件 为例(函数组件用 Hooks 行为类似):

1. 父组件重新渲染 → 传给子组件的新 props 变化

父组件更新 → 子组件收到新的 props。

2. 子组件生命周期触发顺序(props 改变时)

如果使用的是 React 16.3+ 的新生命周期:

static getDerivedStateFromProps(nextProps, prevState)
  • 当 props 改变时首先执行

  • 是一个“纯函数”,不能访问 this

  • 可根据 nextProps 更新 state(不常用)

shouldComponentUpdate(nextProps, nextState)
  • 决定是否需要重新渲染

  • 返回 false → 阻止后续 render

  • PureComponent 在内部自动实现浅比较

render()
  • props 或 state 变化都会执行

  • 你必须明确:render 不等于真实 DOM 更新

getSnapshotBeforeUpdate(prevProps, prevState)
  • 用来在 DOM 更新前读取信息(例如滚动条位置)
componentDidUpdate(prevProps, prevState, snapshot)
  • DOM 已经更新

  • 可进行网络请求、操作 DOM、更新状态需慎重(避免死循环)

二、props 改变时 render() 会不会执行?

会执行!

只要以下任意条件成立,render() 一定执行:
  • props 发生变化

  • state 发生变化

  • 父组件重新 render(即使 props 没变)

只有一种情况 render 不执行:

shouldComponentUpdate 返回 false:

shouldComponentUpdate() {return false
}

或使用 PureComponent 但 props/state 没变化(浅比较)。

三、为什么 props 改变会执行 render?

因为 React 的核心思想是:

UI = f(state, props)

只要 props 或 state 改变,UI 就可能发生变化 → 需要调用 render() 生成新的 Virtual DOM

然后 React 会:

  • 对新旧 Virtual DOM 做 diff

  • 只更新变化的 DOM 节点(避免整体刷新)

这就是效率高的原因。

最简总结

props 改变 → 子组件严格的生命周期:
getDerivedStateFromProps
↓
shouldComponentUpdate
↓
render
↓
getSnapshotBeforeUpdate
↓
componentDidUpdate

props 改变时一定会执行 render(除非你拦截)

相关新闻

  • 全 IB 认证加持,十五年一贯制深耕!嘉兴国际学校标杆 —— 青鸟同文实验学校实力解读
  • 2025 年 11 月码垛机厂家权威推荐榜:龙门/立柱/全自动/机器人码垛设备,高效智能与稳定耐用工业之选
  • CLaunch设置自动开机启动的方法

最新新闻

  • 终极ESP-Drone开源飞控教程:从零构建你的第一架智能无人机
  • 学充电桩维修有前途吗 - 湖南阳光技术
  • MC68VZ328 BGA焊接可靠性:为何官方推荐HASL而非ENIG表面处理?
  • 免费光学模拟器终极指南:在浏览器中探索光的魔法世界!
  • 如何用南京信息工程大学LaTeX模板高效完成毕业论文排版
  • 2026年6月固定式升降货梯厂家推荐指南 - 多才菠萝

日新闻

  • 5分钟掌握Python进化算法:Geatpy高性能优化工具完全指南
  • Microchip 24AA044 EEPROM选型与应用全指南:从参数解析到实战编程
  • 华为的鸿蒙到底有多牛?为什么称作遥遥领先?

周新闻

  • 3步解锁iOS设备:applera1n激活锁绕过完全指南
  • 39 2026 人工智能证书终极盘点,普通人选 AI 证书可以从这些方向入手
  • Redis 暴露公网有多危险?从端口检查到补救步骤

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号