(一)需要
最近在学习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
或者能够关注我的公众号:国星聊成长(我会分享成长的办法)