共计 1274 个字符，预计需要花费 4 分钟才能阅读完成。
（一）需要
最近在学习 React，学到了 React Hook 做了 useState Demo。
（二）介绍
1、默认值是数字类型
const [num, setNum] = useState(0);
const clickX = () => {setNum(num + 1);
}
<p>
1、初始化为数字:{num}
</p>
<Button onClick={clickX}>
Click Number
</Button>
2、默认值是对象类型
初始化为对象是用构造复制的模式
const [obj, setObj] = useState({a: 1});
const clickObj = () => {setNum(num + 1);
setObj({...obj, b: num + 1});
}
<p>
2、初始化为对象: a-{obj.a} ;b-{obj.b}
</p>
<Button onClick={clickObj}>
Click Object
</Button>
（三）实现 Demo
/*
* @Author: ArdenZhao
* @Date: 2022-04-14 16:46:18
* @LastEditTime: 2022-04-14 17:06:55
* @FilePath: /react-ts/src/components/react/7-Hook-useState.js
* @Description: file information
*/
import React, {useState, useCallback} from 'react';
import {Button} from 'antd';
import "antd/dist/antd.css";
function HookUseState(props) {
// useState 不能放在函数外部，这里设置初始值为 0
const [num, setNum] = useState(0);
const [obj, setObj] = useState({a: 1});
const clickX = () => {setNum(num + 1);
}
const clickObj = () => {setNum(num + 1);
setObj({...obj, b: num + 1});
}
return (
<div>
<h1>Learn, {props.name}</h1>
<p>
1、初始化为数字:{num}
</p>
<Button onClick={clickX}>
Click Number
</Button>
<p>
2、初始化为对象: a-{obj.a} ;b-{obj.b}
</p>
<Button onClick={clickObj}>
Click Object
</Button>
</div>
);
}
export default HookUseState
// 参考链接
// https://flaviocopes.com/react-hook-usecallback/
写在最初的话
学习路上，经常会懈怠。
《有想学技术须要监督的同学嘛~》
https://mp.weixin.qq.com/s/Fy…
如果有须要的搭档，能够加我微信：learningisconnecting
或者能够关注我的公众号：国星聊成长（我会分享成长的办法）
正文完