react-hooks

如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

the rules of hooks

1. 只在最顶层使用Hook,不要在循环，条件或嵌套函数中调用Hook
2. 只在React函数中调用Hook

React.Fragment 和 aux 组件是一样的效果

import React, { useState } from 'react'

/**
 * React.Fragment 和 aux 组件是一样的效果
 */
const todo1 = props => {
    const [todoName, setTodoName] = useState('todo')
    const [todoList, setTodoList] = useState([])
    // const [todoState, setTodoState] = useState({
    //     userInput: '',
    //     todoList: []
    // })

    const inputChangeHandler = (e) => {
        console.log(e.target.value)
        setTodoName(e.target.value)
    }
    const todoAddHandler = () => {
        console.log('add')
        setTodoList(todoList.concat(todoName)) // new Array
    }

    return <React.Fragment>
        <input 
            type="text" 
            placeholder="Todo" 
            onChange={inputChangeHandler} 
            value={todoName}
        />
        <button onClick={todoAddHandler}>Add</button>
        <ul>
           {todoList.map(item => (
               <li key={item}>{item}</li>
           ))}
        </ul>
    </React.Fragment>
}

const todo = props => {
    const [todoState, setTodoState] = useState({
        userInput: '',
        todoList: []
    })

    const inputChangeHandler = (e) => {
        console.log(e.target.value)
        setTodoState({
            userInput: e.target.value,
            todoList: todoState.todoList
        })
    }
    const todoAddHandler = () => {
        console.log('add')
        setTodoState({
            userInput: todoState.userInput,
            todoList: todoState.todoList.concat(todoState.userInput)
        })
    }

    return <React.Fragment>
        <input 
            type="text" 
            placeholder="Todo" 
            onChange={inputChangeHandler} 
            value={todoState.userInput}
        />
        <button onClick={todoAddHandler}>Add</button>
        <ul>
           {todoState.todoList.map(item => (
               <li key={item}>{item}</li>
           ))}
        </ul>
    </React.Fragment>
}

export default todo