平武建站

什么是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 (
      
      

        {this.input=input}} value={this.state.inputValue} onChange={this.change.bind(this)}/>
        
      

      
    
        {
          this.state.list.map((v,i)=>{
            return(
                
            );
          })
        }
      

      
    );
  }
}
 
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 (
    
  • {this.props.name}{this.props.content}
    • 
    );
  }
 
  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 (
    
  • {this.props.name}{this.props.content}
    • 
    );
  }
 
  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生命周期的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。


    当前名称：什么是react生命周期
    浏览路径：http://pwwzsj.com/article/pshhoh.html

    其他资讯