react 生命周期实例分析


Posted in Javascript onMay 18, 2020

本文实例讲述了react 生命周期。分享给大家供大家参考,具体如下:

组件挂载:

componentWillMount(组件将要挂载到页面)->render(组件挂载中)->componentDidMount(组件挂载完成后)

组件更新:

1、shouldComponentUpdate(render之前执行,参数为ture时执行render,为false时不执行render)

componentWillUpdate(shouldComponentUpdate之后执行)

componentDidUpdate(render之后执行)

顺序:shouldComponentUpdate-》componentWillUpdate-》render-》componentDidUpdate

import React, { Component, Fragment } from 'react';
import List from './List.js';
 
class Test extends Component {
  constructor(props) {
    super(props);
    this.state={
      inputValue:'aaa',
      list:['睡觉','打游戏'],
    }
    // this.add=this.add.bind(this);
  }
 
  addList() {
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })
  }
 
  change(e) {
    this.setState({
      // inputValue:e.target.value
      inputValue:this.input.value
    })
  }
 
  delete(i) {
    // console.log(i);
    const list = this.state.list;
    list.splice(i,1);
    this.setState({
      list:list
    })
  }
 
  //组件将要挂载到页面时
  componentWillMount() {
    console.log('componentWillMount');
  }
 
  //组件完成挂载后
  componentDidMount() {
    console.log('componentDidMount');
  }
 
  //组件被修改之前,参数为ture时执行render,为false时不往后执行
  shouldComponentUpdate() {
    console.log('1-shouldComponentUpdate');
    return true;
  }
 
  //shouldComponentUpdate之后  
  componentWillUpdate() {
    console.log('2-componentWillUpdate');
  }
 
  //render执行之后
  componentDidUpdate() {
    console.log('4-componentDidUpdate');
  }
 
 
  //组件挂载中
  render() { 
    console.log('3-render');
    return (
      <Fragment>
      <div>
        <input ref={(input)=>{this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
        <button onClick={this.addList.bind(this)}>添加</button>
      </div>
      <ul>
        {
          this.state.list.map((v,i)=>{
            return(
                <List key={i} content={v} index={i} delete={this.delete.bind(this)} />
            );
          })
        }
      </ul>
      </Fragment>
    );
  }
}
 
export default Test;

2、componentWillReceiveProps(子组件中执行。组件第一次存在于虚拟dom中,函数不会被执行,如果已经存在于dom中,函数才会执行)

componentWillUnmount(子组件在被删除时执行)

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class List extends Component {
  constructor(props) {
    super(props);
    this.delete = this.delete.bind(this);
  }
  
  //组件第一次存在于虚拟dom中,函数不会被执行
  //如果已经存在于dom中,函数才会执行
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
  }
 
  //子组件被删除时执行
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
 
  render() { 
    return (
    <li
    onClick={this.delete}>{this.props.name}{this.props.content}</li>
    );
  }
 
  delete=() => {
    this.props.delete(this.props.index);
  }
}
 
List.propTypes={
  name:PropTypes.string.isRequired,
  content:PropTypes.string,
  index:PropTypes.number,
  delete:PropTypes.func
}
 
//设置默认值:
 
List.defaultProps={
  name:'喜欢'
}
 
export default List;

组件性能优化:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class List extends Component {
  constructor(props) {
    super(props);
    this.delete = this.delete.bind(this);
  }
  
  //组件第一次存在于虚拟dom中,函数不会被执行
  //如果已经存在于dom中,函数才会执行
  componentWillReceiveProps() {
    console.log('componentWillReceiveProps');
  }
 
  //子组件被删除时执行
  componentWillUnmount() {
    console.log('componentWillUnmount');
  }
 
  shouldComponentUpdate(nextProps,nextState) {
    if (nextProps.content !== this.props.content) {
      return true;
    } else {
      return false;
    }
  }
 
  render() { 
    return (
    <li
    onClick={this.delete}>{this.props.name}{this.props.content}</li>
    );
  }
 
  delete=() => {
    this.props.delete(this.props.index);
  }
}
 
List.propTypes={
  name:PropTypes.string.isRequired,
  content:PropTypes.string,
  index:PropTypes.number,
  delete:PropTypes.func
}
 
//设置默认值:
 
List.defaultProps={
  name:'喜欢'
}
 
export default List;

希望本文所述对大家react程序设计有所帮助。

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
jQuery实现Tab菜单滚动切换的方法
Sep 21 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
canvas绘制的直线动画
Jan 23 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
node.js使用express-fileupload中间件实现文件上传
Jul 16 Javascript
react使用CSS实现react动画功能示例
May 18 #Javascript
Node.js API详解之 net模块实例分析
May 18 #Javascript
Javascript实现简易天数计算器
May 18 #Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 #Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 #Javascript
关于AngularJS中几种Providers的区别总结
May 17 #Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 17 #Javascript
You might like
PHP读取大文件的几种方法介绍
2016/10/27 PHP
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
js纯数字逐一停止显示效果的实现代码
2016/03/16 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
js实现九宫格拼图小游戏
2017/02/13 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
JavaScript链式调用实例浅析
2018/12/19 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[30:00]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第二场 11.28
2020/12/01 DOTA
详解Django中Request对象的相关用法
2015/07/17 Python
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
军训口号
2014/06/13 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
2014年租房协议书范本
2014/10/30 职场文书
清洁工个人总结
2015/03/04 职场文书
表扬信范文
2015/05/04 职场文书
管辖权异议上诉状
2015/05/23 职场文书
公司催款律师函
2015/05/27 职场文书
浅谈Python数学建模之整数规划
2021/06/23 Python