react生命周期函数

Todolist.js组件

import React, { Component, Fragment } from 'react'
import TodoItem from './TodoItem'
import './style.css'
export default class Todolist extends Component {
    // 当父组件的render函数被运行时候
    constructor(props) {
        super(props)
        this.state = {
            inputValue: '',
            list: []
        }
        this.submitValue = this.submitValue.bind(this)
        this.delItem = this.delItem.bind(this)
    }
    // 在组件即将被挂载到页面的时刻自动执行
    componentWillMount() {
        console.log('componentWillMount')
    }
    render() {
        console.log('render')
        return (
            <Fragment>
                <div>
                    {/* {jsx中注释的写法} */}
                    <label htmlFor="insert">输入内容</label>
                    <input type="text" id="insert" className="input" value={this.state.inputValue} onChange={this.inputChange}></input>
                    <button onClick={this.submitValue}>提交</button>
                </div>
                <ul ref={(ul) => { this.ul = ul }}>{this.getTodoItem()}</ul>
            </Fragment>
        )
    }
    // 组件被挂载到页面之后，自动被执行
    componentDidMount() {
        // 建议在该生命周期内发送ajax请求
        console.log('componentDidMount')
    }
    // 组件被更新之前，他会被自动执行
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate')
        return true // 返回true时，组件进行更新，如果返回fasle则不会更新
    }
    // 组件被更新之前，它会自动执行，但是他在shouldComponentUpdate之后执行
    // 如果shouldComponentUpdate返回true则执行，如果返回false，则该函数不会执行
    componentWillUpdate() {
        console.log('componentWillUpdate')
    }
    // 组件更新完成之后，他会执行
    componentDidUpdate() {
        console.log('componentDidUpdate')
    }
    getTodoItem() {
        return this.state.list.map((item, index) => {
            return (
                <div key={index}>
                    <TodoItem content={item} index={index} deleteItem={this.delItem} />
                    {/*<li key={index} onClick={this.delItem.bind(this, index)} dangerouslySetInnerHTML={{__html:item}}></li>*/}
                </div>

            )
        })
    }
    inputChange = (e) => {
        var value = e.target.value
        this.setState(() => ({
            inputValue: value
        }))
        // this.setState({
        //     inputValue: e.target.value
        // })
    }
    submitValue() {
        this.setState((prevState) => {
            return {
                list: [...prevState.list, prevState.inputValue],
                inputValue: ''
            }
        }, () => {
            // 在此处用法没有问题
            console.log(this.ul.querySelectorAll('div').length)
        })
        // this.setState是一个异步函数，所以会出现输出的ul下面的div的length比实际长度少1
        console.log(this.ul.querySelectorAll('div').length)
        // this.setState({
        //     list: [...this.state.list, this.state.inputValue],
        //     inputValue: ''
        // })
    }
    delItem(index) {
        this.setState((prevState) => {
            const list = [...prevState.list]
            list.splice(index, 1)
            return { list }
        })
        // const list = [...this.state.list]
        // list.splice(index, 1)
        // this.setState({
        //     list: list
        // })
    }
}

TodoItem.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
export default class TodoItem extends Component {
    constructor(props) {
        super(props)
        // 当组件的state或者props发生改变时，render函数就会重新执行
        this.handleClick = this.handleClick.bind(this)
    }
    // 提升react性能点
    // 1、将事件的this绑定放到constructor里,组件只渲染一次，提升性能
    // 2、 setState内置性能提升机制
    // 3、 react底层虚拟DOM
    // 4、shouldComponentUpdate
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.content !== this.props.content) {
            return true
        } else {
            return false
        }
    }
    render() {
        return (<div onClick={this.handleClick}>{this.props.content}</div>)
    }
    handleClick() {
        this.props.deleteItem(this.props.index)
    }
    // 一个组件要从父组件接收参数
    // 只要父组件的render函数被执行了，子组件的这个生命周期函数就会被执行
    // 如果这个组件第一次存在于父组件中，不会执行
    // 如果这个组件之前已经存在于父组件中，才会执行
    componentWillReceiveProps() {
        console.log('child componentWillReceiveProps')
    }
    componentWillUnmount() {
        console.log('child componentWillUnmount')
    }
}
TodoItem.propTypes = {
    content: PropTypes.string.isRequired, // 必传
    deleteItem: PropTypes.func,
    index: PropTypes.number
}
// 设置父组件没有传时候的默认值
TodoItem.defaultProps = {
    content: 'hello word'
}