什么是生命周期函数:在某一时刻组件会自动调用执行的函数。
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会被合并执行,对于相同属性的设置会保留最后一次设置