react.js——生命周期函数

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';
import './style.css';
class TodoList extends Component {
  constructor(props) {
    console.log(`constructor`);
    super(props);
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleBtnClick = this.handleBtnClick.bind(this);
    this.handleItemDelete = this.handleItemDelete.bind(this);
  }

  //在组件即将被挂在到页面的时候自动执行
  UNSAFE_componentWillMount() {
    console.log(`componentWillMount`);
  }

  //在组件被挂在到页面之后自动执行
  componentDidMount() {
    console.log(`componentDidMount`);
  }

  //在组件被更新之前自动执行
  shouldComponentUpdate() {
    console.log(`shouldComponentUpdate`);
    //返回true将执行render，返回false将不执行render
    return true;
  }

  //组件被更新之前，它会自动执行，但是它在sholdComponent之后被执行
  //如果shouldComponentUpdate返回false，则不执行
  //如果shouldComponentUpdate返回true，则执行
  UNSAFE_componentWillUpdate() {
    console.log(`componentWillUpdate`);
  }

  //组件更新完成之后自动执行
  componentDidUpdate() {
    console.log(`componentDidUpdate`);
  }

  //当一个组件要从父组件接受参数
  //只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行
  //如果这个组件第一次存在于父组件中，不会执行
  //如果这个组件之前已经存在于父组件中，将会执行
  UNSAFE_componentWillReceiveProps() {
    console.log(`componentWillReceiveProps`)
  }

  //当这个组件即将被从页面中剔除的时候，会被执行
  componentWillUnmount(){
    console.log(`componentWillUnmount`);
  }
  
  render() {
    console.log(`render`);
    return (
      <Fragment>
        <div>
          <label htmlFor="insertArea">请输入内容</label>
          <input
            id="insertArea"
            className="input"
            value={this.state.inputValue}
            onChange={this.handleInputChange}
            ref={(input) => { this.input = input }}
          />
          <button onClick={this.handleBtnClick}>提交</button>
        </div>
        <ul>
          {this.getTodoItem()}
        </ul>
      </Fragment>
    )
  }
  getTodoItem() {
    return this.state.list.map((item, index) => {
      return (
        <div key={index}>
          <TodoItem content={item} index={index} handleItemDelete={this.handleItemDelete} />
          { /*<li
          key={index}
          onClick={this.handleItemDelete.bind(this, index)}
          dangerouslySetInnerHTML={{ __html: item }}
        ></li> */}
        </div>
      )
    })
  }
  handleInputChange(e) {
    // let inputValue = e.target.value;
    // this.setState({
    //   inputValue
    // })
    // let inputValue = e.target.value;
    let inputValue = this.input.value;
    this.setState(() => ({ inputValue }), () => {
      // console.log(`这里是setState执行完的回调`)
    });
  }
  handleBtnClick(e) {
    this.setState((prevState) => ({ inputValue: '', list: [...prevState.list, prevState.inputValue] }));
  }
  handleItemDelete(index) {
    this.setState((prevState) => {
      let list = [...prevState.list];
      list.splice(index, 1);
      return { list }
    });
  }
}
export default TodoList;
/*

虚拟DOM（js对象）

1.state数据

2.JSX模版

3.数据+模版结合生成虚拟DOM (虚 拟DOM就是一个JS对象，用它来描述真实DOM)(损耗了性能)
['div',{id:abc'},['span',{},'hello world']]

4.用虚拟DOM的结构生成真实的DOM，来显示
<div id='abc'><span>hello world</span></div>

5. state 发生变化

6. 数据+模版生成新的虚拟DOM (极大的提升了性能)
[ 'div'，{id:  abc'}, ['span' , {}, 'bye bye']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容(极大的提升性能)

8  直接操作DOM,改变span中的内容

*/

/*
  生命周期函数
  生命周期函数是指在某一个时刻组件会自动调用执行的函数
  当state和props发生改变的时候，render()会自动重新执行
*/