React ref和setState的第二个参数

import React, { Component } from 'react'
import TodoItem from './TodoItem';
import "./style.css"

class TodoList extends Component {
    //类中必有constructor函数 而且会最先执行
    constructor(props) {
        super(props);
        //当一个组件的state或者props发生改变的时候，render函数就会重新执行
        this.state = {
            inputValue: 'dd', //input框内容
            list: ["学习英文", "学习react"] //列表的每一项
        } 
        this.handleButtonClick = this.handleButtonClick.bind(this)
    }

    //提交todolist事件***setState本身是异步函数，会排在事件队列里，等主线程执行完毕再执行，要想setState中第一个参数先执行，就要给第二个参数写个回调函数
    handleButtonClick() {
        this.setState({
            //...this.state.list相当于目前的展开的this.state.list"学习英文", "学习react",将新的这项也加给list
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        }, () => {
            console.log(this.ul.querySelectorAll('div').length)
        })
    }

    render() {
        return (
            <React.Fragment>
                <div>
                    <button onClick={this.handleButtonClick}>提交</button>
                </div>
                {/*this.ul指向ul节点,用ref获取节点*/}
                <ul ref={(ul) => { this.ul = ul }}>
                    {
                        this.state.list.map((item, index) => {
                            // 以下全是父传子，子组件中以props接收
                            return (
                                <TodoItem
                                    key={index}
                                    content={item}
                                    idx={index}
                                    deleteItem={this.handleItemDelete}>
                                </TodoItem>
                            )
                        })
                    }
                </ul>
            </React.Fragment>
        )

    }
}
export default TodoList;