随笔分类 - React
发表于 2024-03-23 17:05阅读：93评论：0推荐：0
摘要：在React中，要在表格数据变化后且下一次渲染完成后执行表单校验逻辑，可以考虑在useEffect钩子中处理这个问题。useEffect会在每次渲染完成后的DOM更新之后执行指定的回调函数。 以下是一个简化的示例： import React, { useState, useEffect } from
阅读全文 »
发表于 2024-03-19 09:10阅读：16评论：0推荐：0
摘要：const renderStartTime = useCallback((text, record, idx, changeTableData) => { return ( <CacheRender dataIndex="startTime" controlRules={() => startTim
阅读全文 »
发表于 2024-03-18 23:44阅读：9评论：0推荐：0
摘要：在这里，将tableData添加到useEffect的依赖数组会导致无限循环。因为在useEffect内部更新了tableData状态，每次状态改变又会触发useEffect再次执行，形成无限循环。 解决这个问题的一种方法是，在状态更新时创建一个新的数组，而不是直接修改现有数组。这样就不会触发依赖数
阅读全文 »
发表于 2024-03-17 22:43阅读：79评论：0推荐：0
摘要：可编辑表格中的两个列分别是用react-hook-form 和antd的inputNumber实现的，需要在开始时间的列输入后失焦时，或者按enter键，鼠标聚焦到下一列，即结束时间，该如何设置 在React项目中，要实现在一个可编辑表格中，当开始时间列输入后失焦或按下Enter键时，自动将焦点切换
阅读全文 »
发表于 2024-03-17 19:31阅读：39评论：0推荐：0
摘要：在使用React的useCallback Hook时，如果直接包裹一个函数而没有提供类型参数，TypeScript会默认认为回调函数的参数类型为any。这是因为useCallback Hook接受两个参数，第一个是回调函数，第二个是一个依赖数组，而TypeScript在没有明确指定类型的情况下无法推
阅读全文 »
发表于 2024-03-17 00:07阅读：172评论：0推荐：0
摘要：在render里能否直接将field 传递给antd的input 当然可以，在render函数中，可以直接将field对象的部分或全部属性传递给Ant Design的Input组件，这样可以让Input组件完全受控于react-hook-form的Controller组件。 例如，您可以像下面这样简
阅读全文 »
发表于 2024-03-14 23:19阅读：373评论：0推荐：0
摘要：如果我使用了react-hook-form，还有必要使用antd的form组件吗？还是直接使用原生的表单组件？例如输入框下拉框？ 使用 react-hook-form 和是否选择使用 antd 的 Form 组件并不互斥，具体取决于你的项目需求和个人偏好。以下是两者结合使用时的一些考量点： Reac
阅读全文 »
发表于 2024-03-14 23:14阅读：251评论：0推荐：0
摘要：useImperativeHandle是React Hooks中的一个API，它的主要作用是定制暴露给父组件的子组件实例的引用。 通常与forwardRef配合使用，用于控制哪些属性或方法能够被父组件通过ref获取和操作。 然而，useImperativeHandle并不能直接用来暴露state属性
阅读全文 »
发表于 2024-03-04 19:09阅读：312评论：0推荐：1
摘要：在CSS Modules中，使用Less编译器编译并转换成模块化CSS后，你不需要在JavaScript中通过style.xxx的方式进行嵌套引用。当你在Less文件中使用嵌套语法编写样式时，编译过程会自动将这些嵌套转换为扁平化的类名，并且生成一个映射对象。 例如，在Less文件（假设为styles
阅读全文 »
发表于 2024-03-04 15:09阅读：27评论：0推荐：0
摘要：有一个子组件DataList,然后在父组件中引入，并在父组件引入中的DataList标签上设置style样式，能生效吗？ 在React中，父组件可以通过props将样式传递给子组件，并在子组件内部应用这些样式。 但直接在父组件引用子组件的地方设置style属性通常不会生效，因为React的JSX语法
阅读全文 »
发表于 2024-02-27 20:17阅读：163评论：0推荐：0
摘要：在软件开发中，SWR 是 " stale-while-revalidate " 的首字母缩写，这是一种在网络应用（尤其是Web应用）中用于数据获取和缓存的策略。 这个策略最早由 Next.js 团队提出并在其数据获取库 next/swr 中实现了这个思想。 SWR 的工作原理如下： 立即使用缓存数据
阅读全文 »
发表于 2024-02-25 14:33阅读：54评论：0推荐：0
摘要：依赖注入 render props 其实就是 React 世界中的 “依赖注入”（Dependency Injection)。 所谓依赖注入，指的是解决这样一个问题： 逻辑 A 依赖于逻辑 B，如果让 A 直接依赖于 B，当然可行，但是 A 就没法做得通用了。 依赖注入就是把 B 的逻辑以函数形式传
阅读全文 »
发表于 2024-02-25 14:23阅读：799评论：0推荐：0
摘要：如果组件中多次使用 useState 怎么办？React 如何“记住”哪个状态对应哪个变量？ React 是完全根据 useState 的调用顺序来“记住”状态归属的，假设组件代码如下： const Counter = () => { const [count, setCount] = useSta
阅读全文 »
发表于 2024-02-25 10:35阅读：84评论：0推荐：0
摘要：在 TypeScript 中，定义子组件的 props 通常有以下两种方式： 接口（Interface）： // 定义一个接口来描述 Props interface MyComponentProps { title: string; items: string[]; onItemSelected:
阅读全文 »
发表于 2024-02-25 10:04阅读：123评论：0推荐：0
摘要：在使用了 TypeScript 的 React 项目中，由于 TypeScript 已经提供了静态类型检查的能力，通常不需要再额外使用 prop-types 库进行运行时的类型检查。 TypeScript 在编译阶段就能通过类型注解确保组件之间的 props 类型正确无误，这有助于在开发阶段就发现类
阅读全文 »
发表于 2024-02-07 15:42阅读：86评论：0推荐：0
摘要：useEffect 传入的函数，它的返回值要么是一个方法（清理函数），要么就是undefined，其他情况都会报错 比较常见的一个情况是，我们的 useEffect 需要执行一个 async 函数，比如： // ❌ // Type 'Promise<void>' provides no match
阅读全文 »
发表于 2024-02-06 13:37阅读：22评论：0推荐：0
摘要：弹窗组件（Modal）是否需要使用记忆化（memoization），主要取决于该组件的性能优化需求以及其内部复杂性。记忆化是一种用于优化函数或组件性能的技术，它通过缓存先前计算的结果以避免在相同的输入参数下重复执行耗时的操作。 对于一个简单的弹窗组件而言，如果其内容不涉及复杂的计算或者大量数据处理，
阅读全文 »
发表于 2024-02-05 20:37阅读：71评论：0推荐：0
摘要：React中的错误边界处理是指的哪些？ 在React中，错误边界（Error Boundaries）是一种React组件，它能够捕获并处理其子组件树任何位置上抛出的JavaScript错误，并且阻止这些错误导致整个应用崩溃。当一个错误边界内的子组件发生渲染错误、生命周期方法中的错误或其他同步错误时，
阅读全文 »
发表于 2024-02-05 19:39阅读：43评论：0推荐：1
摘要：在React中，命令式行为通常指的是那些直接操作DOM或修改数据源而不通过React的声明式机制（如setState、useState Hook等）的操作。React的核心理念是声明式编程，它鼓励开发者描述UI应该是什么样子，而不是如何改变它。 命令式行为示例包括： 直接操作DOM： 使用原生Jav
阅读全文 »
发表于 2024-02-05 11:56阅读：44评论：0推荐：0
摘要：你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄，最好是像 这样，将 isOpen 作为一个 prop。为什么这样要求？ 在React和现代UI开发中，遵循声明式编程范式通常被认为是一种最佳实践。暴露命令式的句柄（如open和close方法）会导致组件之间产生更紧
阅读全文 »
