React中的生命周期函数

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 100 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ronle/p/10613923.html

文章标签：

#javascript #ViewUI

本文详细介绍了React组件的各个生命周期方法，包括组件挂载前后的处理、更新前后的方法调用以及卸载时的操作。文中通过具体示例展示了每个生命周期方法的使用场景。

 1 // 组件即将被挂载到页面时执行
 2 componentWillMount() {
 3   console.log("componentWillMount");
 4 }
 5 
 6 // 组件挂载到页面之后执行
 7 componentDidMount() {
 8   console.log("componentDidMount");
 9 }
10 
11 // 组件被更新之前执行
12 shouldComponentUpdate(nextProps, nextState, nextContext) {
13   console.log("shouldComponentUpdate");
14   return true
15 }
16 // 组件被更新之前，但在shouldComponentUpdate之后，返回true才执行
17 componentWillUpdate(nextProps, nextState, nextContext) {
18   console.log("componentWillUpdate")
19 }
20 // 组件更新完成之后执行
21 componentDidUpdate(prevProps, prevState, snapshot) {
22   console.log("componentDidUpdate")
23 }
24 
25 // 一个组件要从父组件接受参数
26 // 如果这个组件第一次存在于父组件，不会执行
27 // 如果这个组件之前已经存在于父组件中，才会执行
28 componentWillReceiveProps(nextProps, nextContext) {
29   console.log("child componentWillReceiveProps")
30 }
31 // 当这个组件即将从页面剔除的时候执行
32 componentWillUnmount() {
33   console.log("child componentWillReceiveProps")
34 }