• Mounting/组件挂载相关:

componentWillMount

componentDidMount

  • Updating/组件更新相关:

componentWillReceiveProps

shouldComponentUpdate

componentWillUpdate

componentDidUpdate

  • Unmounting/组件移除相关:

componentWillUnmount

一、Mounting/组件挂载相关

componentWillMount

在组件挂载之前执行,但仅执行一次,即使多次重复渲染改组件,或者改变了组件的state。若希望该回到能执行多次,可以使用ReactDOM.unmountComponentAtNode移除掉已有的组件,然后再重新render。

    var diva = document.getElementById('a');
var divb = document.getElementById('b');
var i=;
var Component1 = React.createClass({
componentWillMount:function(){
console.log(++i)
},
render: function() {
console.log(Date.now());
return <div name={this.props.name}>我只是一个安静的div</div>
}
});

  //触发componentWillMount,render
ReactDOM.render(
<Component1 />, diva
);
  
  //未触发componentWillMount,触发render
ReactDOM.render(
<Component1 />, diva
);

  //触发componentWillMount,render
ReactDOM.render(
<Component1 />, divb
);
  //未触发componentWillMount,未触发render
ReactDOM.render(
<Component1 />, divb
);

componentDidMount

在组件挂载之后执行,同componentWillMount一样,同一个组件重复渲染只执行一次,卸载组件后重新渲染可以重新触发一次。

二、Updating/组件更新相关

componentWillReceiveProps

在组件接收到props的时间点之前调用,注意组件初始化渲染时不会调用。

    var i = 0;
var div = document.getElementById('a'),
var div2 = document.getElementById('b'); var Component1 = React.createClass({
componentWillReceiveProps: function(){
console.log(i++)
},
clickCb: function() {
React.render(
<Component1 />, div2
);
},
render: function() {
return <div onClick={this.clickCb}>点我给下一个div挂载组件</div>
}
}); React.render(
<Component1 />, div //初始化不会触发componentWillReceiveProps
);
React.render(
<Component1 />, div //重复渲染会触发componentWillReceiveProps
);
React.unmountComponentAtNode(div); //移除掉已有组件
React.render(
<Component1 />, div //初始化不会触发componentWillReceiveProps
);

运行结果如下:

该接口带有一个参数nextProps,可以利用它来获取新的props的值(this.props获取到的是当前的,也就是旧的props)

  var i = 0;
var div = document.getElementById('a');
var render = function(){
React.render(
<Component1 i={i++} />, div
);
}; var Component1 = React.createClass({
componentWillReceiveProps: function(nextProps){
console.log(this.props.i, nextProps.i)
},
render: function() {
return <div onClick={render}>props.i的值是:{this.props.i}</div>
}
});
render();

运行结果如下

shouldComponentUpdate

该接口实际是在组件接收到了新的props或者新的state的时候会立即调用,然后通过返回值来决定是否要重新渲染当前的组件。

接口带两个参数,第一个参数表示新的props,第二个参数表示新的state。

  var div = document.getElementById('a');

  var Component1 = React.createClass({
getInitialState: function(){
return { i : }
},
shouldComponentUpdate: function(nextProps, nextState){
console.log( this.state.i, nextState.i );
return nextState.i > ? true : false; //返回true才会渲染组件
},
clickCb: function(){
this.setState({
i : this.state.i +
})
},
render: function() {
return <div onClick={this.clickCb}>state.i的值是:{this.state.i}</div>
}
});
ReactDOM.render(
<Component1 />, div
);

点击第四次之后才会渲染组件,在div里显示正确的新state.i

componentWillUpdate

同shouldComponentUpdate一样,在组件收到新的props或者state的时候会调用,而且也有着两个参数来获取新的props和state。

不过本接口仅在shouldComponentUpdate执行并返回了true的时候才会被调用。

在上一个代码实例中做点改动

 componentWillUpdate: function(nextProps, nextState){
console.log( 'yoyoyo', this.state.i, nextState.i );
},

componentDidUpdate

在组件更新,重新渲染完毕之后调用,它和componentWillUpdate一样有着两个参数来获取新的props和state

 var div = document.getElementById('a');

    var Component1 = React.createClass({
getInitialState: function(){
return { i : }
},
shouldComponentUpdate: function(nextProps, nextState){
console.log( this.state.i, nextState.i );
return nextState.i > ? true : false; //返回true才会执行componentWillUpdate并重新渲染组件
},
componentDidUpdate: function(nextProps, nextState){
console.log( '已经渲染完毕咯', this.state.i, nextState.i );
},
componentWillUpdate: function(nextProps, nextState){
console.log( '还没渲染哦', this.state.i, nextState.i );
},
clickCb: function(){
this.setState({
i : this.state.i +
})
},
render: function() {
return <div onClick={this.clickCb}>state.i的值是:{this.state.i}</div>
}
});
ReactDOM.render(
<Component1 />, div
);

运行结果如下:

三、Unmounting/组件移除相关:

 var div = document.getElementById('a');
var div2 = document.getElementById('b'); var Component1 = React.createClass({
    DOMArr : [],
    getInitialState: function(){
      return { i : }
    },
    componentDidUpdate: function(nextProps, nextState){
      var dom = document.createElement('p');
      dom.innerText = this.state.i;
      div2.appendChild(dom);
      this.DOMArr.push(dom);
},
    componentWillUnmount: function(){
      if(!this.DOMArr.length) return;
      var i = ;
      while(i < this.DOMArr.length){console.log(i);
        div2.removeChild(this.DOMArr[i++]); //移除componentDidUpdate里添加过的DOM
      }
    },
    clickCb: function(){
      this.setState({
        i : this.state.i +
      })
    },
    render: function() {
      return <div onClick={this.clickCb}>state.i的值是:{this.state.i}</div>
    }
});
ReactDOM.render(
  <Component1 />, div
); div2.addEventListener('click',function(){
  ReactDOM.unmountComponentAtNode(div) //点击div2则卸载掉第一个div里的组件
}, false)

运行结果如下:

四、getDefaultProps和getInitialState

getDefaultProps

该方法是所有我们提及的方法中最先触发的,可以在该方法里return 一个对象来作为组件默认的props值(如果父组件传进来了props,以父组件为主),它只在组件初次挂载到页面上时触发,即使你重新挂载了组件。

getInitialState

用于给组件初始化state的值,调用该方法要求必须return 一个对象或者null,否则报错。该方法在组件每次实例化的时候都会触发。

var diva = document.getElementsByTagName('div')[],
divb = document.getElementsByTagName('div')[];
var Component1 = React.createClass({
getDefaultProps: function(){
console.log('getDefaultProps');
return { name : Date.now() }
},
getInitialState: function(){
console.log('getInitialState');
return null; //必须返回一个null或对象,否则会报错
}, render: function() {
console.log(Date.now());
return <div name={this.props.name}>我只是一个安静的div</div>
}
});
ReactDOM.render(
{/* 触发一次 getDefaultProps 和 getInitialState */}
<Component1 />, diva
);
ReactDOM.render(
{/* getDefaultProps 和 getInitialState都不触发 */}
<Component1 />, diva
);
ReactDOM.unmountComponentAtNode(diva);
ReactDOM.render(
{/* 触发一次getInitialState */}
<Component1 name="a"/>, diva
);
ReactDOM.render(
{/* 触发一次getInitialState */}
<Component1/>, divb
);

五、总结

上面是9个周期接口,它们被触发的顺序?

 var Component1 = React.createClass({
getDefaultProps: function(){
console.log('getDefaultProps')
},
getInitialState: function(){
console.log('getInitialState');
return null
},
componentWillMount: function(){
console.log('componentWillMount')
},
componentDidMount: function(){
console.log('componentDidMount')
},
componentWillReceiveProps: function(){
console.log('componentWillReceiveProps')
},
shouldComponentUpdate: function(){
console.log('shouldComponentUpdate');
return true;
},
componentWillUpdate: function(){
console.log('componentWillUpdate')
},
componentDidUpdate: function(){
console.log('componentDidUpdate')
},
componentWillUnmount: function(){
console.log('componentWillUnmount')
},
render: function() {
return <div>我只是一个安静的div</div>
}
});
ReactDOM.render(
<Component1 />, document.body
);
ReactDOM.render(
<Component1 />, document.body
);
ReactDOM.unmountComponentAtNode(document.body)

结果如下:

React入门--------组件的生命周期的更多相关文章

  1. reactjs入门到实战(七)---- React的组件的生命周期

    React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他     getInitia ...

  2. react native组件的生命周期

    react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...

  3. Android React Native组件的生命周期及回调函数

    熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...

  4. 【RN - 基础】之React Native组件的生命周期

    下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...

  5. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  6. React:组件的生命周期

    在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...

  7. react教程 — 组件的生命周期 和 执行顺序

    一.组件执行的生命周期:                  参考  https://www.cnblogs.com/soyxiaobi/p/9559117.html  或  https://www.c ...

  8. React Native——组件的生命周期

    组件生命周期 上流程图描述了组件从创建.运行到销毁的整个过程,可以看到如果一个组件在被创建,从开始一直到运行会依次调用getDefaultProps到render这五个函数:在运行过程中,如果有属性和 ...

  9. React(三)组件的生命周期

    Component Specs and LifeCycle <div id="app"></div> <script src="bower_ ...

随机推荐

  1. LeetCode 22. Generate Parentheses

    Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...

  2. Redis配置集群一(window)

    因为接下来的项目要使用到redis作为我们项目的缓存,所以就花了一天时间研究了一下redis的一些用法,因为没转linux虚拟机,所以就决定先研究一下windows版本的redis集群.主要是redi ...

  3. [转载]Emmet使用

    转载地址:http://www.iteye.com/news/27580 Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语 ...

  4. TableView使用CATransform3D特效动画

    效果一: 在代理方法中实现: - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell fo ...

  5. C# ACM poj1004

    水题.. public static void acm1004(float[] a) { ; foreach (var item in a) { sum += item; } Console.Writ ...

  6. ie67 设置最小宽度最小高度

    1.最小宽度 min-width:1003px; _width:expression((document.documentElement.clientWidth||document.body.clie ...

  7. 在mysql 中两种锁定问题

    mysql 中15.2.10.5 中描述了两个问题,且分别给出了解决办法. 1.向子表中写入数据,但写入之前需确保父表中存在其相应信息. 可能出现,在已经读取父表中的数据,但另一请求将其删除. 办法: ...

  8. Android - 和其他APP交互 - 让其他app启动你的activity

    前面的两篇文章主要讲了一个方面:从app中启动其他app.但是如果你的app可以处理对其他app有用的操作,你的app也应该响应其他app的操作请求.例如,如果你创建了一个社交app可以分享信息和图片 ...

  9. 4. ZooKeeper 基本操作

    ZooKeeper的数据模型及其API支持以下九个基本操作: 操作 描述 create 在ZooKeeper命名空间的指定路径中创建一个znode delete 从ZooKeeper命名空间的指定路径 ...

  10. 关于.Net的知识和相关书籍

    a. DBCC DROPCLEANBUFFERS 清空缓存信息b. DBCC FREEPROCCACHE 从过程缓存中删除所有元素2. 引用两个和尚打水的故事,说明平时要注重积累,只有量变达到了才会形 ...