优秀的编程知识分享平台

网站首页 > 技术文章 正文

React-useState你肯定不知道还能这么用

nanyue 2024-08-05 19:52:48 技术文章 11 ℃

useState是React中最有用的hook之一, 有些用法一般人不是很知道。

最简单的用法就是放置一个具体的值,返回一个state, setState的方法,如下图,

其实还可以传入一个函数,写一些逻辑,而这个函数只会在初始化的时候执行一遍, 比如下面这个, 它会先去看LocalStorage里有没有值,如果有的话就返回local storage的值,没有就用默认空字符串

其实不光是useState, 它返回的setCount也可以传函数。

一般我们写setCount(count+1), 但其实可以写成setCount(prev=>prev+1)

这样写有个好处就是,当进行多个set的时候,它的值不会被合并,看下面的代码:


上面这两种写法会产生不同的结果,它们都会被react合并执行,但上面的count永远只能拿到当前的count,所以最终会等于count + 1, 而下面的则会出现你所期望的结果count + 2

最近发表
标签列表