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 相关文章推荐
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
JS getMonth()日期函数的值域是0-11
Feb 15 Javascript
JS 对象属性相关(检查属性、枚举属性等)
Apr 05 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
jquery选择器使用详解
2014/04/08 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
基于OL2实现百度地图ABCD marker的效果
2015/10/01 Javascript
图解Sublime Text3使用技巧
2015/12/21 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
很棒的js选项卡切换效果
2016/07/15 Javascript
jQuery动态增减行的实例代码解析(推荐)
2016/12/05 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
详解基于 Node.js 的轻量级云函数功能实现
2019/07/08 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python利用不到一百行代码实现一个小siri
2017/03/02 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
岗位职责风险防控
2014/02/18 职场文书
家装电话营销开场白
2015/05/29 职场文书
夏洛特的网观后感
2015/06/15 职场文书