react练手——用react hooks 创建一个ToDolist

为什么要用react hooks

使用一项技术之前，我们首先要清楚，不能为了用而用。那么，为什么要使用react hooks呢，在我看来，有以下几个理由

• 简单，相比于之前的class组件，react hooks上手的速度极快。
• 性能高，相比于class组件，函数式组件的性能更高
• 无障碍切换，完美兼容之前撰写的代码

代码分析

数据结构

TodoList其实只需要维护一个

todos（代办事项）数组

整体流程

input框中，用户输入，之后，添加到todos数组中。

用户在todos列表中，对代办事项进行删除，标记已完成等操作

实现

通过前面的分析，可以分析，一共有三个部分：

• Control：输入组件
• ToDos： 展示每一项的列表
• TODOItem：展示每一项

代码

Control的代码

function Control(props){
    const {addToDo} = props

    const inputRef = useRef()

    const submit = (e)=>{
        e.preventDefault()
        const txt = inputRef.current.value;
        addToDo({
            id: ++idSeq,
            toggle: false,
            txt: txt
        })
    }

    return (
        <div>
            <form onSubmit={submit}>
                <input
                placeholder = "what you want to do"
                ref = {inputRef}
                >
                </input>
            </form>
        </div>
    )

}
           

Control的代码值得注意的是引入了一个hooks的新特性

useRef

这个hooks的主要作用是获取所在html组件的值，react还有一个特性

useState

他和useRef很像，都可以获取当前用户输入的数据，选择哪一个，取决于数据是否需要重新渲染，具体，可以看这篇

ToDos 和 T0DoItem的代码

function ToDoItem(props){
    const {todo:{id, toggle, txt},removeToDo, toggleToDo} = props;

    const onChange = ()=>{
        toggleToDo(id)
    }
    const remove = ()=>{
        removeToDo(id)
    }


    return (
        <li >
            <input type="checkbox"
            onChange = {onChange}
            checked={toggle}>
            </input>
            <label>
                {txt}
            </label>
            <button onClick={remove}>
            </button>
        </li>
    )
}

function ToDos(props){
    const {todos,removeToDo, toggleToDo} = props;

    return(
        <ul>
            {todos.map(todo =>{
                return (
                    <ToDoItem 
                    todo = {todo}
                    removeToDo = {removeToDo}
                    toggleToDo = {toggleToDo}
                    >
                    
                    </ToDoItem>
                )
            })}
        </ul>
    )
}
           

ToDos 和 T0DoItem的代码需要注意的有两点

• map函数直接可以返回r

  eact 组件

• todo的二重解析，对象的结构，即这行代码

const {todo:{id, toggle, txt},removeToDo, toggleToDo} = props;
           

ToDoList集合的代码

export default function ToDoList(){

    const [items, setItems] = useState([])


    const addToDo = (item) =>{
        let olditems = [...items]
        olditems.push(item)
        setItems(olditems)
    }

    const removeToDo = (id) =>{
        let olditems = [...items]
        olditems = olditems.filter(item => {
            return item.id !== id
        })
        setItems(olditems)
    }

    const toggleToDo = (id) =>{
        let olditems = [...items]
        olditems = olditems.map(item =>{
            if(item.id == id){
                item.toggle = !item.toggle
            }
            return item
        })
        setItems(olditems)
    }


    return(
        <div>
            <Control addToDo={addToDo}></Control>
            <ToDos todos={items} removeToDo={removeToDo} toggleToDo = {toggleToDo}></ToDos>
        </div>
    )

}
           

ToDoList集合的代码需要注意的是：

• 数组push之后，没有返回值
• map之后，需要重新赋值，才能将改变的数组更新

总而言之，使用react hooks，肉眼可见的简单，效率高。