react系列（6）组件生命周期钩子函数

约定不等于承诺〃 2021-09-14 10:24 446阅读 0赞

“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。

React 组件生命周期：

componentWillMount ：在渲染前调用,在客户端也在服务端。

componentDidMount：在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。

componentWillReceiveProps：在组件接收到一个新的prop时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用，可以在你确认不需要更新组件时使用。

componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate：在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnmount：在组件从 DOM 中移除的时候立刻被调用。

<script type="text/babel">
    	//组件生命周期Demo
    	var LiftDemo = React.createClass({
    		getInitialState:function(){
    			return {num:0};
    		},
    		setNum:function(){
    			this.setState({num:this.state.num+1});
    		},
    		render:function(){
    			return (
    				<div>
    					<button onClick={this.setNum}>click</button>
    					<Content name={this.state.num}></Content>
    				</div>
    			);
    		}
    	});
    	
    	var Content = React.createClass({
    		componentWillMount:function() {
    	        console.log('componentWillMount')
    	    },
    	    componentDidMount:function() {
    	        console.log('componentDidMount')
    	    },
            // 该钩子函数表示当父组件的props入参改变时调用，常用于父组件入参变化影响子组件渲染
    	    componentWillReceiveProps:function(newProps) {
    	        console.log('componentWillReceiveProps')
    	    },
    	    shouldComponentUpdate:function(newProps, newState) {
    	        return true; //当该值设为false的时候，不会更新组件，即componentWillUpdate和componentDidUpdate不会被执行
    	    },
    	    componentWillUpdate:function(nextProps, currentState) {
    	        console.log('componentWillUpdate');
    	    },
    	    componentDidUpdate:function(prevProps, prevState) {
    	        console.log('componentDidUpdate')
    	    },
    	    componentWillUnmount:function() {
    	        console.log('componentWillUnmount')
    	    },
                render:function(){
    			return (<h1>{this.props.name}</h1>);
    	    }
    	});
    	
    	ReactDOM.render(
    		<LiftDemo />,
    		document.getElementById("example")
    	);
    </script>

运行结果：点击前

![Center][]

点击后：

![Center 1][]

[Center]: /images/20210813/11804a7cb0fd4d53af857923239b3e53.png
[Center 1]: /images/20210813/1073d87115e145ffbf46cc63cdf8686b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，446人围观）

还没有评论，来说两句吧...

相关阅读

相关生命周期和钩子函数

生命周期和钩子函数图示详解实例图示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

电玩女神/ 2023年10月05日 13:22/ 0 赞/ 29 阅读

相关学习笔记——react的生命周期钩子函数

-------------------- > react的生命周期大体分为三个阶段：组件创建，组件更新，组件销毁。并且只有类组件才具有生命周期的钩子函数，函数组件没有。 !

Love The Way You Lie/ 2022年12月19日 01:22/ 0 赞/ 241 阅读

相关 React -- 组件生命周期

React的生命周期分为挂载、渲染和卸载三个阶段。这三个阶段分为两类： 1、组件在挂载或卸载时 2、组件接受新的数据时，即组件更新渲染时卸载和挂载 1、组

雨点打透心脏的1/2处/ 2022年06月16日 02:38/ 0 赞/ 351 阅读

相关 React（6）生命周期（组件生命周期、state生命周期）

12、生命周期参考链接： [React组件生命周期小结][React] 两个生命周期，分别是组件的生命周期，和状态变更的声明周期组件结构：父组件套用子组件

桃扇骨/ 2022年05月31日 08:08/ 0 赞/ 483 阅读

相关 angular 生命周期钩子函数

生命周期执行顺序 1.ngOnChanges 在有输入属性的情况下才会调用，该方法接受当前和上一属性值的SimpleChanges对象。如果有输入属性，会在ngOnIni

喜欢ヅ旅行/ 2022年03月19日 04:48/ 0 赞/ 356 阅读

相关 React的生命周期钩子函数

一、React的生命周期钩子函数旧版 1. 挂载时，初始化阶段 1）`constructor()` : 如果不初始化state或不进行方法绑定，则不需要为rea

灰太狼/ 2021年11月01日 10:38/ 0 赞/ 509 阅读

相关生命周期（钩子函数）

生命周期（钩子函数）一、生命周期过程解释 > 实例创建之后，初始化事件和生命周期，而后触发beforeCreate。beforeCreate，当前实例创建之前

Bertha 。/ 2021年09月15日 14:50/ 0 赞/ 479 阅读

相关 react系列（6）组件生命周期钩子函数

“钩子”就是在某个阶段给你一个做某些处理的机会。生命周期钩子函数就是在组件预备、创建、使用和销毁的过程中的函数监听。 React 组件生命周期： componentWill

约定不等于承诺〃/ 2021年09月14日 10:24/ 0 赞/ 447 阅读

相关 Vue生命周期钩子函数

Vue生命周期：Vue实例从创建到销毁的过程，称为Vue的生命周期； Vue生命周期示意图：[点击前往][Link 1] Vue钩子函数官方文档：[点击前往][Link 2

矫情吗；*/ 2021年07月25日 15:39/ 0 赞/ 591 阅读

相关 Vue生命周期钩子函数

一点睛 1 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个

小灰灰/ 2021年07月24日 21:58/ 0 赞/ 561 阅读