React实训 todolist各种实现方式

//类组件
import React, { Component, Fragment } from "react"

class App extends Component {
  // 最先执行的函数
  constructor(props) {
    super(props);
    // 定义组件数据
    this.state = {
      inputValue: '',
      list: []
    }
  }
  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor="insertLabel">输入内容：</label>
          <input value={this.state.inputValue} 
           id="insertLabel"
           onChange={this.handleChange.bind(this)}
          /><button onClick={this.handleClick.bind(this)}>提交</button>
        </div>
        <ul>
          {/* 循环的内容 */}
          {
            this.state.list.map((item, index) => {
              return (
                <li key={index} onClick={this.handleItemDelete.bind(this, index)}
                dangerouslySetInnerHTML={{__html: item}}></li>
              )
            })
          }
        </ul>
      </Fragment>
    )
  }
  handleChange(e) {
    // 当输入的时候改变输入框的值
    console.log(e.target.value)
    console.log(this)
    // 必须通过setState改变State中的数据
    this.setState({
      inputValue: e.target.value,
    })
    console.log(this.state)
  }
  // 增加
  handleClick() {
    this.setState({
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
    console.log(this.state)
  }
  // 删除
  handleItemDelete(index) {
    console.log(index)
    // 复制一个state数组，不要通过this.state去修改state中的数据
    const list = [...this.state.list]
    list.splice(index, 1)
    this.setState({
      list: list
    })
  }
}
export default App;

// 函数组件
import React, {useState, useEffect, useRef, Fragment} from "react";
function App() {
/* 
    useEffect(()=>{
      console.log('n变了')
  },[n])
  当n改变时才执行，要不就是直接跳过
*/
  const [inputValue, setInputValue] = useState(0)
  const [list, setList] = useState([])
  
  const initFormRef = useRef();

  const handleInput = (e) => {
    console.log(e.target.value)
    setInputValue(e.target.value)
  }

  // 用于setList修改之后能够及时拿到新得值
  useEffect(() => {
    initFormRef.current = list;
    console.log(initFormRef.current)

  }, [list]);
  const handleClick = (e, value) => {
    console.log(e)
    console.log(value)
    if(inputValue === '') {
     return
    }
    setList([...list, inputValue])
    console.log(list)
  }
  const handleItemDelete = (index) => {
    console.log(index);
    const listValue = [...list]
    listValue.splice(index, 1)
    setList([...listValue])
  }
  return (
    <Fragment>
      <div>
        <label htmlFor="insertLabel">请输入内容：</label>
        <input value={inputValue} onChange={(e) => handleInput(e)}/><button onClick={(e) => handleClick(e, 'aa')}>提交</button>
        <ul>
          {
           list.map((item, index) => {
             return ( <li key={index} 
                       onClick={() => handleItemDelete(index)}
                      dangerouslySetInnerHTML={{__html: item}}></li>)
           })
          }
        </ul>
      </div>
    </Fragment>
  );
 
}
export default App;