You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
importReactfrom'react';functionTodoList(props){let{ list }=props;return(<divclassName="todo-list"><ul>{list.map((item,index)=>{return<likey={index}>{item}</li>})}</ul></div>);}exportdefaultTodoList;
注:看了很多文章大家都直接使用了英文的 Hooks,这里想纠正一下,建议大家以后直接使用 Hook 即可。
Hook 简介
简单来讲,Hook 的意义:
Render Props
带来的冗余代码,以及对组件结构带来的破坏性;this
绑定问题,不稳定语法提案,以及生命周期带来困扰;Hook 的简单使用
系统提供的 Hook 有以下几种:
useState()
state
在函数组件中的使用:useEffect()
简易的验证码倒计时的例子:
使用 Hook 编写 TodoList
TodoList 是大家学习新内容的首选项目,话不多说,直接开始。
环境配置
使用
create-react-app
搭建环境,并引入ant-design
:修改
App.js
的代码:修改
App.css
的样式:开启 Todo 之旅
首先,修改下组件结构,将
App
组件改为函数式,并添加一个Input
组件:接下来,当输入框输完内容,点击添加 Todo,会添加一个 Todo 到列表中。因此,我们需要 state 来存储当前输入的 Todo:
然后,需要将每次输入的 Todo 保存在列表中,因此需要再次引入一个 TodoList 的 state。
并且每次输入完成,点击添加后,应该清除之前的 todo 的值:
最后,我们使用一个列表来展示所生成的 TodoList:
创建
TodoList
组件:引入 TodoList 组件,并传入我们生成的 todoList 的 state:
总结
上述使用了
useState
巧妙的实现了 TodoList 的效果。总的来说,Hook 还是非常便捷的。下一节,我们将继续完善这个 TodoList,加入更多的 Hook。参考
Hook 简介
Hook 概览
使用 State Hook
The text was updated successfully, but these errors were encountered: