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

class TodoList extends Component {
    constructor(props){
        super(props);

        this.state = {
            inputValue: "",
            list: []
        }

        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleDelItem = this.handleDelItem.bind(this)

    }

    componentWillMount(){
        console.log("componentWillMount")
    }

    render(){
        console.log("render");
        return (
            <Fragment>
                <div>
                    <label htmlFor="InputArea">输入内容</label>
                    <input
                        id="InputArea" 
                        className="input"
                        value={this.state.inputValue}
                        onChange={this.handleInputChange}
                        ref={(input) => {
                            this.input = input;
                        }}
                    ></input>
                    <button onClick={this.handleBtnClick}>提交</button>
                </div>
                <ul ref={(ul) => {this.ul = ul;}}>
                    {this.getTodoItem()}
                </ul>
            </Fragment>
        )
    }

    componentDidMount(){
        console.log("componentDidMount")
    }

    handleInputChange(e){
        const value = this.input.value;
        this.setState(() => ({inputValue: value}))
    }

    handleBtnClick(){
        this.setState((prevState)=>({
            list:[...prevState.list, prevState.inputValue],
            inputValue:""
        }), () => {
            console.log(this.ul.querySelectorAll('div').length);
        })
    }

    handleDelItem(index){
        this.setState((prevState) => {
            const list = [...prevState.list];
            list.splice(index, 1);

            return {list}
        })
    }

    getTodoItem(){
        return this.state.list.map((item,index) => {
            return <TodoItem 
            key={item}
            content = {item}  
            index = {index} 
            deleteItem = {this.handleDelItem}
            />
        })
    }
}

export default TodoList;

componentDidMount为何被执行了两次？

“react”: “18.2.0”,

为啥在index.js去掉React.StrictMode，componentDidMount就被执行了一次。
React.StrictMode是干什么用的？为何有它的时候，componentDidMount被执行了两次。

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
    <TodoList />
  // </React.StrictMode>
);

警告提示componentWillMount已经不推荐使用了。老师可否介绍一下getDerivedStateFromProps

    static getDerivedStateFromProps(props, state) {
        console.log("componentWillMount")
        return null;
    }