组件的生命周期
React 组件的生命周期广义上可以分为四个阶段:初始化阶段,挂载阶段、更新阶段、卸载阶段
初始化阶段
constructor()
挂载阶段
componentWillMount() : void
componentDidMount() : void
更新阶段
componentWillReceiveProps(nextProps) : void
shouldComponentUpdate(nextProps, nextState) : bool
componentWillUpdate(nextProps, nextState) : void
render : jsx
componentDidUpdate(prevProps, prevState) : void
卸载阶段
componentWillUnmount() : void
API详解
constructor()
组件实例的构造函数。
它可以接收 props
和 context
参数,如果显式的接收参数,还需将参数通过 super()
传递给组件的基类。
此时可以对 this.state
进行初始化赋值。
这个函数不处理返回值。
componentWillMount() : void
当组件已经被初始化,并被挂载,还未被首次渲染到 dom 之前执行。
一般用于服务端渲染使用,React官方不建议前端在这个函数中通过异步方法去加载数据。
这个函数不处理返回值。
注意,该函数在 React 17 中已经被弃用,如果需要强制启用需采用
UNSAFE_componentWillReceiveProps
的函数名。
componentDidMount() : void
当组件已经被初始化,并且已经完成第一次的渲染后执行。
此时基础的 dom 节点已经生成,可以在这个函数中通过异步方法去加载远程数据,然后再通过 setState
函数触发重新渲染机制。
这个函数不处理返回值。
componentWillReceiveProps(nextProps) : void
当组件接收到由父组件发起的 Props 变化前执行。
它接收一个 nextProps
的参数,代表的是最新的属性,如果此时要访问当前的属性,还可以通过 this.Props
访问。 如果组件内部有建立 Props 和 State 的关系,可以在这个函数中通过 setState
函数去更新相关的 State
这个函数不处理返回值。
注意,如果在该函数中不论调用
setState
多少次,那么shouldComponentUpdate
->componentWillUpdate
->render
->componentDidUpdate
的过程也只会执行一次,也就是说setState
触发的渲染流程会和父组件发起 Props 变化所触发的渲染流程合并在一起处理。
注意,该函数在 React 17 中已经被弃用,如果需要强制启用需采用
UNSAFE_componentWillReceiveProps
的函数名。
shouldComponentUpdate(nextProps, nextState) : bool
当组件接收到由父组件发起的 Props 变化前或者当 State 变化前执行。
它接收 nextProps
和 nextState
参数,代表的是最新的属性和状态,如果此时要访问当前的属性或状态,可以通过 this.Props
和 this.State
访问。
这个函数是 React 组件性能优化的关键,当该函数返回 true 时, Props 或 State 的值会被正常更新,同时会触发相应的渲染操作,在某些情况下如果要忽略掉因 nextProps 或 nextState 变化而导致的渲染过程可以通过返回 false 来达到目的。
这个函数处理 bool 类型的返回值,并根据该返回值决定是否要执行后续的渲染过程。
注意,当这个函数返回 false 的值时,后续的渲染过程将不会再执行,但是相应的 Props 或 State 的值会被更新。
注意,在该函数中不允许使用
setState
函数,否则会出现Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
错误
componentWillUpdate(nextProps, nextState) : void
当 shouldComponentUpdate
返回为 true 后,在执行 render
之前执行。
它同样接收 nextProps
和 nextState
参数,代表的是最新的属性和状态,如果此时要访问当前的属性或状态,可以通过 this.Props
和 this.State
访问。
这个函数不处理返回值。
注意,在该函数中不允许使用
setState
函数,否则会出现Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
错误
注意,该函数在 React 17 中已经被弃用,如果需要强制启用需采用
UNSAFE_componentWillUpdate
的函数名。
componentDidUpdate(prevProps, prevState) : void
组件除了首次渲染后会执行 componentDidMount
之外,其余的情况下被重新渲染会执行 componentDidUpdate
函数。
它接收 prevProps
和 prevState
参数,代表的是渲染之前的属性和状态,此时通过 this.Props
和 this.State
访问的是最新的属性和状态。
这个函数不处理返回值
注意,在该函数中不允许使用
setState
函数,否则会出现Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
错误
render() : jsx
组件的核心渲染函数,当首次渲染以及通过更新 Props 或 State 后导致触发的重新渲染过程会被执行。
这个函数处理 jsx 类型的返回值,React 内核会根据返回的 jsx 生成 virtual dom,然后与当前的 virtual dom 进行比较,从中计算出最小的变化(以节点为单位),同时将变化的节点同步渲染到真正的 dom 中。
这个函数处理 jsx 类型的返回值
注意,在该函数中不允许使用
setState
函数,否则会出现Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
错误
componentWillUnmount() : void
此方法在组件被卸载前调用,可以在这里执行一些清理工作,比如清楚组件中使用的定时器,清楚 componentDidMount
中手动创建的 dom 元素等,以避免引起内存泄漏。
这个函数不处理返回值