reacthook的useState
useState不能在类组件中使用,在函数组件中使用hook,useState就是其中一种hook。
不能在循环,条件,嵌套函数等中调用useState()
useState方法可以定义一个state变量
。
基本使用
声明一个变量
const [ count, setCount ] = useState();
声明一个变量并初始化
const [count, setCount ] = useState(1);
更新值
// 将变量count变为2
setCount(2);
// 更新的值依赖旧值
// val为旧值
setCount((val) => val 1);
useState异步更新
使用useState是异步更新,不能立即获取到新值。
const [count, setCount] = useState(0);
const handle = () => {
console.log(count); // 0
setCount(1);
console.log(count); // 0
}
解决方法
- 使用useEffect,获取最新值
const [count, setCount] = useState(0);
const handle = () => {
console.log(count); // 0
setCount(1);
console.log(count); // 0
}
useEffect(() => {
console.log(count); // 1
}, [count]);
- 用一个其他变量保存新值
假如变量赋值后,需要更新后的值进行逻辑修改,可以在赋值的同时生成一个新变量,用这个新变量进行逻辑修改。
const [count, setCount] = useState(0);
const handle = () => {
console.log(count); // 0
setCount(1);
const num = 1;
console.log(count); // 0
// 然后使用num进行逻辑修改
}
useState对于引用数据类型更改值为该值的引用(浅拷贝)
const obj = { age: 1 }
const [obj1, setObj1] = useState(obj);
const [obj2, setObj2] = useState(obj);
const objMethod = () => {
setObj1((val) => val.age = 2);
// 本来更改变量obj1是值,结果变量obj2也随之改变
console.log(obj1, 'obj1'); // { age: 2 }
console.log(obj2, 'obj2'); // { age: 2 }
}
解决方法
- 直接赋值一个新对象
const objMethod = () => {
setObj1(({age: 2});
// 只更改变量obj1
console.log(obj1, 'obj1'); // { age: 2 }
console.log(obj2, 'obj2'); // { age: 1 }
}
- 深拷贝
const [obj1, setObj1] = useState(obj);
const [obj2, setObj2] = useState(JSON.parse(JSON.stringify(obj)));
const objMethod = () => {
setObj1((val) => val.age = 2);
// 只更改变量obj1
console.log(obj1, 'obj1'); // { age: 2 }
console.log(obj2, 'obj2'); // { age: 1 }
}
保存引用数据类型直接返回变量本身,useEffect检测不到
const objMethod = () => {
setObj1((val) => {
-- val.age;
return {val};
});
}
// 此时useEffect不会检测到obj1变化
useEffect(() => {
console.log(obj1, 'useEffect中的obj1');
}, [obj1])
解决:返回一个新对象
const objMethod = () => {
setObj1((val) => {
-- val.age;
return {...val};
});
}
// 此时useEffect会检测到obj1变化
useEffect(() => {
console.log(obj1, 'useEffect中的obj1');
}, [obj1])
useState不能保存函数
// 函数没有返回值
const fun = () => {
console.log('这是一个函数');
}
const [saveFun, setSaveFun] = useState(fun);
useEffect(() => {
console.log(saveFun);
}, [saveFun])
打印结果:
发现直接执行了函数,并没有打印出值,值为undefined
。
假设函数有返回值
const fun = () => {
console.log('这是一个函数');
console.log({age: 1});
return {age: 2}
}
const [saveFun, setSaveFun] = useState(fun);
useEffect(() => {
console.log(saveFun);
}, [saveFun])
发现也是执行了函数,并且函数返回{age: 2}
,所以可以看出当useState
保存函数时,函数会自己调用,并且返回函数的结果,而不是函数本身。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgfgjff
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13