初学 React Hooks 和 antd-design

已于 2024-01-21 21:20:02 修改
阅读量410 收藏
点赞数
分类专栏： 学习过程中遇到的问题 文章标签： react.js
于 2023-06-15 01:35:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cappuccino_Luo/article/details/131135655
版权
文章详细探讨了ReactHooks中的useState和useRef在处理状态和数据流时的差异，强调useState的异步性和批量更新特性，以及useRef对于实时获取最新值的优势。同时，分析了antd设计的Modal组件在不同状态下如何进行props传递，并指出不可见Modal不会渲染子组件及影响props传递。
摘要由CSDN通过智能技术生成

初学 React hooks

umi: 3.5.40
React: 17.0.2
antd: 4.16.13

useState 和 useRef

使用小心得：

  1. setCount 之后不要直接使用 count ；
  2. 执行顺序要求比较严格的多用 useRef 会比较简洁。比如请求一个接口，获取响应值后马上带着响应值请求下一个接口，你可以用 let const useRef 去接这个响应值，但是千万别用 useState 去接，不然就要增加一个 useEffct ，否则你立马使用的肯定不是响应值。
  3. 能少用尽量少用，因为 useState 一旦改变状态会导致组件重新渲染。

const [count, setCount] = useState<number>(0); 参数一： state 声明的状态；参数二：更新参数一声明的状态的值。

  1. useState 会异步且批量更新数据，但是 useState 不能实时获取最新的值（React 更新状态数据之前多次执行 setCount ，取最后一次执行的 setCount）;
  2. 基本数据类型的值发生改变或引用数据类型的引用地址发生改变时，再次使用 useState 的参数二才会再次执行；
  3. useState 的状态发生改变就会重新渲染组件；
  4. useEffect 通常和 useState 配合使用。（对于 useEffect 的副作用说法，我也不是很理解）
    • useEffect(() => {}); 陷入死循环
    • useEffect(() => {}, []); 挂载时执行一次
    • useEffect(() => {}, [count]); 挂载（也可能是赋默认值，我没分清）时，执行一次；此后，只要 count 基本数据类型是值，引用数据类型是引用地址发生改变时就会执行 useEffect 的回调函数，即参数一。（参数二放入 useRef ， useRef 发生改变时不会执行 useEffect 的回调）
    • 当 useEffect 没有监听到依赖的数据发生改变时存在两种可能（我已知），一是引用地址没有发生改变，二是 useEffect 放在子组件上监听父组件传来的消息，而子组件在父组件中没有满足条件不渲染也会导致 useEffect 监听不到依赖数据的变化。

const countRef = useRef<number>(0);

  1. countRef 可以实时获取最新的值；
  2. countRef 的改变不会引起组件的重新渲染；
  3. countRef 的改变不会触发 useEffect 的回调函数。
import { Button } from "antd";
import { memo, useEffect, useRef, useState } from "react";

const TeachAssistantList: React.FC = () => {
  const countRef = useRef<number>(0);
  const countRef2 = useRef<number>(0);
  const [count, setCount] = useState<number>(0);
  const [count2, setCount2] = useState<number>(0);
  const [count3, setCount3] = useState<number>(0);

  // 单纯更改 countRef2.current 不会执行 useEffect 的回调函数，但是 setCount(count + 1); 后就会再次执行
  useEffect(() => {
    console.log(countRef2.current, 'countRef2');
    setCount2(count2 + 1);
  }, [countRef2.current]); // 改为 countRef2 会导致连 countRef2.current 都监听不到

  useEffect(() => {
    console.log(count);
  }, [count]);

  // setInterval(() => {
  //   console.log(count3, 'count3');
  //   setCount3(count3 + 1);
  // }, 10000);

  return <div>
    {console.log(123)}
    <Button onClick={() => countRef.current += 1}>改变 countRef</Button>
    <Button onClick={() => countRef2.current += 1}>改变 countRef2</Button>
    <Button onClick={() => {
      // setCount(1);
      // setCount(2);
      // setCount(3);

      // setCount(count);

      setCount(count + 1);
    }}>改变 count</Button>
  </div>
};

export default memo(TeachAssistantList);

antd-design 的 Modal 组件的 props 传值

结论

        不可见的 Modal 组件不会向子组件进行 props 传值且子组件也不会渲染，但是它不会影响 return 之外的函数执行，也不会影响 return 内非子组件的函数执行（标签和组件都没渲染）。
        两个 Modal 之间存在一个显示另一个隐藏时，这两个 modal 之间是并列关系而不是嵌套关系。

TeachAssistantList.tsx

import { Button } from "antd";
import { memo, useEffect, useState } from "react";
import FirstModal from "./FirstModal";

const TeachAssistantList: React.FC = () => {
  // 显示弹窗
  const [firstShowModal, setFirstShowModal] = useState<boolean>(false);
  const [count, setCount] = useState<number>(0);
  const [haha, setHaha] = useState<boolean>(false);

  useEffect(() => {
    console.log(count);
  }, [count]);
  
  useEffect(() => {
    console.log(haha);
  }, [haha]);
  
  return <div>
    {console.log(123)}
    <Button onClick={() => {
      setFirstShowModal(true);
    }}>显示弹窗</Button>
    <Button onClick={() => {
      setCount(count + 1);
      setHaha(!haha);
    }}>改变 count 和 haha 的值</Button>
    <FirstModal
      firstShowModal={firstShowModal}
      setFirstShowModal={setFirstShowModal}
      count={count}
      setCount={setCount}
      haha={haha}
      setHaha={setHaha}
    />
  </div>
};
export default memo(TeachAssistantList);

FirstModal.tsx

import { Button, Modal } from "antd";
import { memo, useEffect, useState } from "react";
import Watch from "../Watch";
import SecondModal from "../SecondModal";

interface PropsType {
  firstShowModal?: boolean;
  setFirstShowModal?: (firstShowModal: boolean) => void;
  count?: number;
  setCount?: (count: number) => void;
  haha?: boolean;
  setHaha?: (haha: boolean) => void;
}

const FirstModal: React.FC<PropsType> = ({
  firstShowModal = false,
  setFirstShowModal,
  count = 0,
  setCount,
  haha = false,
  setHaha
}) => {
  const [secondShowModal, setSecondShowModal] = useState<boolean>(false);

  useEffect(() => {
    console.log(count, 1);
  }, [count]);

  useEffect(() => {
    console.log(haha, 1);
  }, [haha]);

  return <Modal
    centered
    maskClosable={false}
    visible={firstShowModal}
    onCancel={() => setFirstShowModal?.(false)}
    onOk={() => setSecondShowModal(true)}
  >
    {console.log(456)}
    <Button onClick={() => {
      setCount?.(count + 1);
      setHaha?.(!haha);
    }}>改变 count 和 haha 的值</Button>
    <Watch
      type="FirstModal"
      count={count}
      haha={haha}
    />
    <SecondModal
      secondShowModal={secondShowModal}
      setSecondShowModal={setSecondShowModal}
      count={count}
      haha={haha}
    />
  </Modal>
}

export default memo(FirstModal);

{console.log(456)} 用 div 标签包裹，打印照样执行，如果没显示过 FirstModal 对话框并不会有 div 标签。
SecondModal.tsx

import { Button, Modal } from "antd";
import { memo, useEffect } from "react";
import Watch from "../Watch";

interface PropsType {
  secondShowModal?: boolean;
  setSecondShowModal?: (secondShowModal: boolean) => void;
  count?: number;
  haha?: boolean;
}

const SecondModal: React.FC<PropsType> = ({
  secondShowModal = false,
  setSecondShowModal,
  count = 0,
  haha = false
}) => {
  useEffect(() => {
    console.log(count, 2);
  }, [count]);

  useEffect(() => {
    console.log(haha, 2);
  }, [haha]);

  return <Modal
    centered
    visible={secondShowModal}
    onCancel={() => setSecondShowModal?.(false)}
    onOk={() => setSecondShowModal?.(false)}
  >
    {console.log(789)}
    <Watch
      type="SecondModal"
      count={count}
      haha={haha}
    />
  </Modal>
}

export default memo(SecondModal);

Watch.tsx

import { memo, useEffect } from "react";

interface PropsType {
  type?: string;
  count?: number;
  setCount?: (count: number) => void;
  haha?: boolean;
  setHaha?: (haha: boolean) => void;
}

const Watch: React.FC<PropsType> = ({
  type = 'normal',
  count = 0,
  haha = false
}) => {
  useEffect(() => {
    console.log(count, type);
  }, [count]);

  useEffect(() => {
    console.log(haha, type);
  }, [haha]);

  return <div>
    {console.log('watch', type)}
    <div>{ count }, { type }</div>
    <div>{ haha }, { type }</div>
  </div>
}

export default memo(Watch);

截图分析

图1：初始加载
antd-design 的 Modal 组件

“123” “0” “false” 都是 TeachAssistantList.tsx 打印的，“456” “0 1” “false 1” 都是 FirstModal.tsx 打印的。

  1. 子组件先挂载；
  2. SecondModal.tsx 和 Watch.tsx 都没有打印说明不可见的 Modal 不会渲染 Modal 内的子组件。

图2：点击一次“改变 count 和 haha 的值”
antd-design 的 Modal 组件

“123” “1” “true” 都是 TeachAssistantList.tsx 打印的，“456” “1 1” “true 1” 都是 FirstModal.tsx 打印的。

        说明 TeachAssistantList.tsx 的 count 和 haha 成功通过 props 传递给了 FirstModal.tsx 并且使 FirstModal.tsx 发生了重新渲染，此外， Modal 组件内的子组件没有挂载。

图3：点击一次“显示弹窗”（显示 FirstModal 对话框，不显示 SecondModal 对话框）
antd-design 的 Modal 组件

“123” 是 TeachAssistantList.tsx 打印的，“456” 是 FirstModal.tsx 打印的，“789” “1 2” “true 2” 都是 SecondModal.tsx 打印的，“watch FirstModal” “1 ‘FirstModal’” “true ‘FirstModal’” 都是 Watch.tsx 打印的。（此时的 count 为1， haha 为 true）

        因为没有打印 “watch SecondModal” “1 ‘SecondModal’” “true ‘SecondModal’”，所以不可见的 SecondModal 和不可见的 FirstModal 效果是一样的，说明 Modal 里面套 Modal 只需要考虑一个 Modal 的情况。

图5：点击 FirstModal 对话框的“确定”
antd-design 的 Modal 组件

“456” 是 FirstModal.tsx 打印的，"789"是 SecondModal.tsx 打印的，“watch SecondModal” “1 ‘SecondModal’” “true ‘SecondModal’” 都是 Watch.tsx 打印的。（此时的 count 为1， haha 为 true）

图6-1：点击两个 Modal 对话框的“取消”，回到最初的页面。
antd-design 的 Modal 组件
图6-2：点击两次“改变 count 和 haha 的值”
antd-design 的 Modal 组件
图6-3：先点击“显示弹窗”，弹出 FirstModal 对话框后点击 FirstModal 对话框的“确定”。
antd-design 的 Modal 组件
        上面三张图都没有打印过"true ‘SecondModal’" 和 “false ‘SecondModal’”，说明不可见的 Modal 组件不会向子组件进行 props 传值，可见的 Modal 组件需要传递的值发生改变时才会向子组件进行 props 传值。

Cappuccino_Luo
关注
专栏目录
react-hooks:react+hooks+antd,管理系统基础功能
05-29
这个项目是用引导的。 可用脚本 在项目目录中，您可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参阅有关的部分。 yarn build 将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。 构建被缩小，文件名包括哈希值。 您的应用程序已准备好部署！ 有关更多信息，请参阅有关的部分。 yarn eject 注意：这是一种单向操作。 一旦eject ，就回不去了！ 如果您对构建工具和配置选择不满意，您可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。 相反，它会将所有配置文件和可传递依赖项（webpack、Babel
react-ReactAntD后台管理系统解决方案one
08-15
React AntD 后台管理系统解决方案-one 是一个基于React和Ant Design框架构建的高效、易用的后台管理系统模板。React作为当前最流行的JavaScript库之一，以其组件化开发模式和虚拟DOM特性，极大地提高了前端开发效率...
react Hook+antd封装一个优雅的弹窗组件
YX0711的博客
08-12 1636
在之前学vue2的时候封装过一个全局的弹窗组件，可以全局任意地方通过this调用，这次大创项目是用react技术栈，看了一下项目需求，突然发现弹窗还是比较多的，主要分为基础的弹窗以及form表单式的弹窗，如果只是无脑的去写代码，那些项目也没啥必要了。正好react和hook相结合，去实现一个全局的弹窗组件，便于之后的使用。
react hooks+antd实现一个弹窗2次封装
baidu_41601048的博客
11-04 2256
弹窗在项目业务中很常见，接下来我们将基于antd的Modal组件实现2次封装。比如我们这个组件就叫SelectCityDialog。 基本思路就是： （1）弹窗组件的显示和隐藏由SelectCityDialog内部一个变量visable来控制，而这个值为true或者false则是由我们传入的值来控制。也就是说父组件传值给SelectCityDialog控制显示和隐藏 （2）由于我们要在外部（父组件）来打开这个弹窗，所以我们要在外部定义一个变量比如我们就叫vis，它每次值的变化则会传递给SelectCi
React 16.8 版本: 带 Hooks 的版本
weixin_33872660的博客
02-18 1786
原文作者：Dan Abramov 译者：UC 国际研发 Jothy写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。随着 React 发布 16.8 版本，React Hooks 也发布稳定版本啦！什么是 Hooks?Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 Re...
react hooks + TS + antd项目总结
qq_44983621的博客
10-24 2877
react hooks + TS + antd项目总结 文章目录react hooks + TS + antd项目总结useEffect中发请求注意事项useContext组件间传参路由组件传参、取值Axios 拦截器加token，统一处理错误项目中遇到的问题 useEffect中发请求注意事项 useEffect 的第二个参数，或根据传入的值有多种变化。 什么都不传 useEffect(() => {})，组件每次 render 之后 useEffect 都会调用，相当于 component
react-hooks:三种不同方案实现企业级电商后台管理系统
03-11
hooks版本在基础版本之上，使用react最新的hooks功能，进行了升级，方便初学hooks的同学参考学习使用到的hooks有useState / useEffect / useCallback / useRef / useMemo / useContext / useReducer antd-design-pro...
2022升级 React18+TS高仿AntD从零到一打造组件库
09-02
在本课程"2022升级 React18+TS高仿AntD从零到一打造组件库"中，我们将深入探讨React最新版本18的特性，结合TypeScript（TS）的强大类型系统，以及如何模仿流行的Ant Design（AntD）框架，来创建一个自定义的组件库。...
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频
06-15
在本套"19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频"中，您将深入学习到一系列现代JavaScript前端开发的重要技术和工具。这些技术涵盖了从基础到高级的应用，旨在帮助开发者构建高效、可维护的React...
react+ant design实现Table的增、删、改的示例代码
10-17
本示例将详细介绍如何使用React和Ant Design实现表格的增、删、改功能。 首先，我们需要在项目中引入必要的库。在`main.jsx`中，我们看到引入了React和ReactDOM，它们是React的核心库，用于渲染React组件到DOM。...
react-Sunflower是支付宝行业技术部推出一套基于antd及reacthooks的业务流程库
08-14
react-Sunflower是支付宝行业技术部推出一套基于antd及reacthooks的业务流程库
react16.7.0的hooks
wangrong111222的博客
03-05 263
react最近新增了很多的功能，像hooks 就是其中的一项 这就要解释一下 为啥要新增这些hooks 了： react 本身 有三种写法： 1， es6以后的class的写法，最常用，生命周期函数也很方便，可能写法稍微啰嗦； 2， function无状态组件的写法 写起来非常的简单，缺点是没有生命周期钩子函数； 3， React.createClass 已经逐渐不用了...
使用react 18 + antd (v5.3.0) 如何设置用户管理？
BradenHan的专栏
03-17 617
antd专门为react定制的中后台组件库，提供了大量的组件供开发者使用。 在中后台中，用户管理是必不可少的。外部用户和内部用户的管理，都涉及到用户、角色和权限的管理。 用户管理贯穿业务各个环节，是支撑业务运营的核心部分。 今天就使用react结合antd V5.0 处理一下用户管理.
React 使用 useRef() 获取循环中所有子组件实例
最新发布
赵花花的博客
08-26 1949
react 获取遍历中所有的子组件实例对象，及对子组件内部函数进行操作
Ant Design Pro V5精讲（基础篇八）：useRef
热水钟博客
07-04 1646
应用场景 获取组件的实例，例如父组件需要调用子组件的方法时。 获取DOM对象，即用于绑定某些DOM，监听组件的事件 函数组件中的全局变量，跨渲染周期保存数据，即组件被多次渲染之后依旧不变的属性，state不能存储跨渲染周期的数以后在，因为state的一旦修改了它，就会造成组件的重新渲染，而useRef不会重新引起渲染。 特性 useRef返回一个可变的ref对象，其.currentn履性被初始化为传入参数（initalValue)。返回的ref对象在组件的生命周期内保持不变。 c...
React Hooks中常用Hooks的用法详解
杨杨吖的博客
01-28 3383
React Hooks中常用Hooks的用法详解
react 项目中 useRef的运用
秋来九月八
08-20 9648
大概分享一下两种常见情况下，使用useref。 第一种，同一组件内部，通过useref来获取某一个dom标签以及dom标签的方法。 在以前使用ref的时候，我们经常用ref来保存某个需要的dom标签，这样需要用到的时候，就可以不用去寻找这个dom标签了，在js中，通过方法，parentNode，lastchild，nextElementsibling 这种关系结构来找dom是一件比较麻烦的事情。如果不是动态类名或者id的话，通过document.getElementsByClassName 之类的方法，虽然
antd组件库封装26-useState和hook
qq_41632427的博客
01-28 107
前端
useState()的回调实现
热门推荐
小怪兽
05-11 1万+
通过一个例子说明一下： 功能：按钮点击使input组件显示，显示后实现input的光标聚焦。 分析：input组件显示后才能调用input的focus()。 1.定义class的实现方式： import React from 'react'; import { Button, Input } from 'antd'; class App extends React.Component { state = { inputVisible: false, }; save
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值