欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react 生命周期实例分析

程序员文章站 2022-03-21 11:40:13
本文实例讲述了react 生命周期。分享给大家供大家参考,具体如下:组件挂载:componentwillmount(组件将要挂载到页面)->render(组件挂载中)->component...

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