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;