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