useState
想象一下这个场景:我们正在开发一款计数器,当用户点击按钮,屏幕上显示的数字就会增加。
这个组件很好实现!我们只需要在组件中定义一个变量,然后在点击事件中对这个变量进行加一操作就可以了,就像这样:
效果:
当前计数:0 [点击 +1]
诶?为什么点击按钮后,数字没有变化呢? 这是因为 React 并不知道我们对 count
进行了修改,所以页面中的 JSX
不会随着数字的变化而更新。
useState
为了解决这个问题,我们需要使用 useState
这个 React
提供的 Hook
。useState
是一个函数,它的作用是在函数组件中添加状态。这是上面的计数器组件使用 useState
的例子:
效果:
当前计数:0 [点击 +1]
在这个例子中,我们可以看到 useState
的基本用法是 const [state, setState] = useState(initialState)
。useState
接受一个参数,这个参数是状态的初始值。useState
返回一个数组,数组的第一个元素是状态的当前值,第二个元素是一个函数,这个函数用来更新状态的值。
注意,useState
是通过返回数组的第二个元素来更新状态的,因此即使我们会对 count
进行加一操作(改变数值),但是我们依旧不需要用 let
来定义 count
,因为 count
是通过 setCount
来更新的。
改写:提示框
轮到你了!在我们之前的课程中,我们只做了 Notice
这个组件,现在,为它添加一个关闭按钮,点击按钮后,内容就会消失。
提示条
这是一个内容
自己尝试一下吧!提示:你可以使用 condition && <Component />
的方式来通过一个条件来控制组件的显示,你也可以调用 antd 中的组件来实现。这是我的代码:
点击查看答案