为什么要用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，肉眼可见的简单，效率高。
