2.React 生命周期函数

 什么是生命周期函数:在某一时刻组件会自动调用执行的函数。

import React,{ Component,Fragment } from 'react'
class Note extends Component{
  //在组件创建的那一刻就会执行,不过是es6语法的,不能算生命周期函数
  //Initialization初始化时在这里定义state,接收props
  constructor(props){
    super(props);
    //当组件的state,props发生改变的时候render会重新执行
    this.state={
      inputValue:'',
      list:[112]
    }
  }
  
  //组件第一次即将被挂载到页面的时候,自动执行
  componentWillMount(){
    console.log('componentWillMount');
  }

  //组件组件第一次挂载到页面之后,自动被执行
  componentDidMount(){
    console.log('componentDidMount');
    //在这里获取ajax数据,componentDidMount只执行一次
    this.init(this.props);
  }
  init = (props)=>{
    //存放ajax接口
  }

  //一个组件要从父组件接受参数
  ////只要父组件的render函数被重新执行了,子组件的这个生命周期函数就会被执行
  //只要父组件的render函数被执行了,子组件的这个componentWillReceiveProps函数就会被执行
  //如果这个组件第一次存在于父组件中,不会执行
  //如果这个组件之前已经存在于父组件中,才会执行
  //对于顶层组件不会执行这个生命周期函数  
  componentWillReceiveProps(){
    console.log('child componentWillReceiveProps');
  }

  //组件需要更新吗,返回的是一个Boolean值,如果返回true,componentWillUpdate、 render、componentDidUpdate 会执行,如果返回false不会执行componentWillUpdate、 render、componentDidUpdate函数
  //组件跟新之前,他会被自动执行
  //接下来props变化成什么样,接下来state会变化成什么样
  shouldComponentUpdate(nextProps,nextState){
    console.log('shoundComponentUpdate');
    //接收的props不等于当前的props时会重新渲染,否则不会,提升了性能
    if(nextProps.content !==this.props.content){
      return true;
    }
    else{
      return false;
    }
  }

  //当shouldComponentUpdate返回true时,在重新渲染之前(render)之前会被执行
  //组件跟新之前,他会自动执行,但是他会在shouldComponentUpdate之后被执行
  //如果shouldComponentUpdate返回true它才执行
  //如果shouldComponentUpdate返回false就不会执行了
  componentWillUpdate(){
    console.log('componentWillUpdate');
  }

  //当shouldComponentUpdate返回true时,在重新渲染之后(render)之后会被执行
  componentDidUpdate(){
    console.log('componentDidUpdate')
  }
  
  //当这个组件即将被从页面中剔除的时候,会被执行
  componentWillUnmount(){
    console.log('componentWillUnmount');
  }

  handelInput = (e)=>{
    console.log(e.target.value);
    //调用setState改变state的值就是更新组建的内容,render重新执行,用最新的数据渲染出模板
    this.setState({inputValue:e.target.value});
  }
  addItem =()=>{
    const {list,inputValue} = this.state;
    this.setState({list:[...list,inputValue],inputValue:''})
  }
  removeItem = (index)=>{
    console.log(index);
    const {list,inputValue} = this.state;
    let newList  = list;
    newList.splice(index,1);
    this.setState({list:newList});
  }
  //数据(props 或者state)发生改变的时候,会被执行
  //父组件的render执行后,子组件的render函数也会被执行
  //render函数是组件中必须有的生命周期函数,因为这个组件是继承Copmonent组件,react这个组件内置默认了所有的生命周期函数,除了render没有内置。
  render(){
    console.log('render');
    const {list} = this.state;
    return (
      <Fragment>
        <input onChange={this.handelInput} value={this.state.inputValue}/>
        <button onClick={this.addItem}>提交</button>
        <ul>
          {
            list.map((item,index)=>{
              return <li key={index} onClick={()=>this.removeItem(index)}>{item}</li> 
            })
          }
        </ul>
      </Fragment>
    )
  }

}
export default Note;
//在同一个方法中多次使用setState,setState会被合并执行,对于相同属性的设置会保留最后一次设置

转载于:https://www.cnblogs.com/wangwenhui/p/10946160.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值