react 生命周期实例分析

本文实例讲述了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程序设计有所帮助。