useState:在函数式组件里使用状态

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

useState 这个 Hook 可以让我们在函数式组件里使用 state,也就是组件的状态。

之前我们只在 class 类型的组件里用过组件的 state,在组件里 state 会作为一个实例属性,用 setState 方法修改状态可以重新渲染组件显示变化之后的样子。如果想在函数式的组件里使用 state,可以利用 useState 这个 Hook。

在 AppHook 这个演示组件的顶部,先从 react 这个包里把 useState 导入进来。然后在组件里使用这个 useState 创建一个组件的 state,声明一个 state,用一下 useState,使用这个方法的时候提供的参数值会作为创建的这个 state 的初始值,比如给它提供一个表情符号。然后使用 console.log 输出这个 state。

在浏览器,观察一下控制台,这里会输出在 AppHook 组件里使用 useState 创建的 state,使用 useState 创建的东西是一个数组,这个数组里有两个项目,第一个项目就是状态的值,数组里的第二个项目是一个函数,使用这个函数可以修改这个 state。

使用 JavaScript 提供的解构写法,可以解构一下这个使用 useState 创建的数组,一组方括号,第一个项目是 state ,起个名字叫 emoji,这个状态的名字可以随便定义,叫什么都行。第二个项目是修改这个 state 用的函数,我们可以叫它 setEmoji。

修改一下组件的显示,一组 h1 元素,然后输出 emoji 这个 state 的值。下面再添加一组 button 元素,按钮文字是表情符号,按钮上用 onClick 监听点击事件,用 onClickEmoji 来处理。

在上面定义一个函数,名字是 onClickEmoji ,一个箭头函数,在这个函数里执行一下 setEmoji,修改一下 emoji 这个 state,判断一下 emoji 是不是等于一棵树,如果是就让它的值等于一只恐龙,不然就让它是一棵树。

在浏览器测试一下,现在这里显示的表情符号就是用 useState 创建的一个 state,名字是 emoji。点击这个按钮,会执行 setEmoji 修改组件里的 emoji 这个 state,组件的状态有变化以后会被重新渲染,所以这里我们可以立即看到变化之后的样子。

在函数式的组件里你可以使用 useState 这个 Hook 创建组件需要的任意数量的 state。 在这个组件里再用 useState 创建一个 state,名字是 quantity 表示数量,修改这个 state 用的方法的名字叫 setQuantity ,执行 useState ,状态的初始值设置成数字 5。

在定义两个方法,一个是 onClickIncrease,在这个方法里,可以执行一下 setQuantity ,让 quantity 的值加上 1 。 再添加一个方法,名字是 onClickDecrease,执行 setQuantity,让 quantity 这个状态的值减少 1。

然后在组件的显示这里,在这个 h1 元素里面,先用一个 br 元素,然后输出 quantity 这个状态的值,在这个表情符号按钮的下面,再添加两个按钮,放在一组 div 元素里,按钮用 button 元素,按钮文字是 + 号,元素上用 onClick 绑定点击事件,处理器设置成 onClickIncrease。

再添加一个 button 元素,按钮文字是 - 号,监听点击事件,用 onClickDecrease 处理这个事件。

再到浏览器上测试一下,这个 AppHook 组件里有两个 state,一个是表情符号,一个是数字。

现在界面上会显示 quantity 这个状态的值,默认值是 5。点击 + 号按钮可以让这个状态的值加上 1 ,点击 - 号按钮,可以让 quantity 这个状态的值减少 1 。

useState:在函数式组件里使用状态《 React 前端应用开发:Hooks 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点