一、当 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（除非你拦截）
