(一)需要

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