render
-
获取最新的props和state
-
在不修改组件state 的情况下，每次调⽤时都返回相同的结果
constructor
-
给 this.state 赋值对象 => 初始化内部state
-
为事件处理函数绑定实例
-
绑定 this，防抖、节流
-
劫持生命周期
-
反向继承
-
不要调⽤ setState()
-
避免将 props 的值复制给 state
constructor(props) {
super(props)
// 不要在这里调用 this.setState()
this.state = { counter: 0 }
this.handleClick = this.handleClick.bind(this)
}
// 1. 不要调用 setState()
// 2. 避免将 props 的值复制给 state
this.state = { color: props.color } // wrong
componentDidMount
-
在组件挂载后（插⼊DOM 树中）⽴即调⽤
-
初始化依赖 DOM 的节点
-
事件监听
-
请求接口
-
-
加 setState
- 发⽣在浏览器更新屏幕之前 => 性能问题
-
有更新在render阶段的 constructor 中 init State，但有更新可以在此方法时 setState
componentDidUpdate
componentDidUpdate(prevProps, prevState, snapshot)
-
更新后会被立即调用
-
首次渲染不会执行此方法
-
如果 setState 要注意加限制，不然容易死循环
componentDidUpdate(prevProps) {
// 典型用法（不要忘记比较 props）：加条件判断，不然死循环
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}
-
getSnapshotBeforeUpdate() 的返回值会作为 componentDidUpdate() 的第三个参数 snapshot参数传递
- 否则snapshot为 undefined
-
shouldComponentUpdate() 返回值为 false => 不会调用 componentDidUpdate()
componentWillUnmount
-
在组件卸载及销毁之前直接调用
-
清除 timer，取消网络请求
-
componentWillUnmount() 中不应调用 setState()
- 该组件将永远不会重新渲染
shouldComponentUpdate（不常用）
-
根据 shouldComponentUpdate() 的返回值
- 判断 React 组件的输出是否受当前 state 或 props 更改的影响
-
默认行为是 state 每次发生变化组件都会重新渲染
-
性能优化：返回false
-
不会调用
-
UNSAFE_componentWillUpdate()
-
render()
-
componentDidUpdate()
-
getDerivedStateFromProps （不常用）
-
取代 componentWillReceiveProps 和 componentWillUpdate
-
根据props的变化改变state
-
返回一个对象来更新 state
-
返回 null 则不更新
-
-
注意把传入的 prop 值和之前传入的 prop 进行比较
-
静态方法
-
保持它是纯函数
-
不要产生副作用
-
getSnapshotBeforeUpdate （不常用）
-
在最近一次渲染输出（提交到 DOM 节点）之前调用
-
任何返回值将作为参数传递给 componentDidUpdate()
static getDerivedStateFromError （不常用）
-
配合Error boundaries使用
-
在后代组件抛出错误后被调用
-
将抛出的错误作为参数
-
并返回一个值以更新 state
-
componentDidCatch （不常用）
-
在“提交”阶段被调用
-
允许执行副作用
-
用于记录错误
unsafe reason
-
The
componentWillUpdatelifecycle method in React caused issues such as conflicts with state updates, problems with asynchronous updates, potential for infinite loops, decreased code readability, and confusion in the component lifecycle. Due to these problems, React deprecatedcomponentWillUpdatein favor of other lifecycle methods and Hooks for better component management. -
在React中，
componentWillUpdate生命周期方法引起了一些问题，例如与状态更新冲突、异步更新的问题、潜在的无限循环、降低代码可读性以及在组件生命周期中造成困惑。由于这些问题，React弃用了componentWillUpdate，推荐使用其他生命周期方法和Hooks来更好地管理组件
UNSAFE_componentWillMount （不建议使用）
-
在挂载之前被调用
-
在 render() 之前调用
- 在此方法中同步调用 setState() 不会生效
-
用componentDidMount替代
UNSAFE_componentWillReceiveProps （不建议使用）
-
在已挂载的组件接收新的 props 之前被调用
-
监听父组件是否执行 render
-
props 改变，判断是否执行更新 state
UNSAFE_componentWillUpdate （不建议使用）
-
组件收到新的 props 或 state 时
- 会在渲染之前调用 UNSAFE_componentWillUpdate()
-
在更新发生之前执行准备更新的机会
-
获取更新前的状态
-
初始渲染不会调用此方法
-
shouldComponentUpdate() 返回 false
- 不会调用 UNSAFE_componentWillUpdate()
