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 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
学习ExtJS border布局
Oct 08 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
js字符串操作方法实例分析
May 06 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
将json转换成struts参数的方法
Nov 08 Javascript
vue中实现在外部调用methods的方法(推荐)
Feb 08 Javascript
ES6与CommonJS中的模块处理的区别
Jun 13 Javascript
详解关于JSON.parse()和JSON.stringify()的性能小测试
Mar 14 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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设置允许大文件上传示例代码
2014/03/10 PHP
php使用google地图应用实例
2014/12/31 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
在vue中使用G2图表的示例代码
2019/03/19 Javascript
微信公众号生成新浪短网址的实现(快速生成)
2019/08/18 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Django之模板层的实现代码
2019/09/09 Python
python 实现两个npy档案合并
2020/07/01 Python
python 实现客户端与服务端的通信
2020/12/23 Python
北京华建集团SQL面试题
2014/06/03 面试题
公务员综合考察材料
2014/02/01 职场文书
大型会议接待方案
2014/03/01 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript