当前位置：首页 > news >正文

React Hooks之useState、useRef

news 文章来源：https://blog.csdn.net/inthat/article/details/135324404 2024/11/1 14:23:53

文章目录

React Hooks之useState
- React Hooks
- useState
- - demo：在函数式组件中使用 useState Hook 管理计数器
  - demo：ant-design-pro 中EditableProTable组件使用
- useRef

React Hooks之useState

React Hooks

在 React 16.8 版本中引入了 Hooks，它是一项新的特性，使得我们在函数组件中可以使用状态（state）和其他 React 特性，而无需编写类组件。

Hook 是一些可以让你在函数组件中“钩入” React 状态及生命周期等特性的函数，它可用于增强函数组件的功能，以解决类组件难以解决的问题。

useState

在 React 中，我们可以使用 useState Hook 来管理函数组件的内部状态。

useState 是一种 Hook，它接收一个初始状态值，并返回一个由当前状态值以及一个更新状态值的函数组成的数组。通常，我们将 useState 的返回值解构为数组的形式，然后使用 ES6 数组解构的方式获取当前状态值和更新状态值的函数。

demo：在函数式组件中使用 useState Hook 管理计数器

以下是一个简单的例子，在函数式组件中使用 useState Hook 管理计数器的状态：

import React, { useState } from 'react'function Counter() {const [count, setCount] = useState(0)return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>+1</button><button onClick={() => setCount(count - 1)}>-1</button></div>)
}export default Counter

在 Counter 组件中调用 useState Hook，初始化计数器的状态值为 0。
count 表示当前状态的值，setCount 表示更新状态的函数。
在 JSX 中，我们可以通过 { count } 的方式引用当前状态值，通过 { () => setCount(count + 1) } 的方式更新状态值。
每次更新状态后，React 都会重新渲染组件使其展示新的页面。

demo：ant-design-pro 中EditableProTable组件使用

上一个例子结构比较简单，

  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() => []);

这段代码使用了 React 的 useState 钩子函数，创建了名为 editableKeys 的状态和一个名为 setEditableRowKeys 的状态更新函数。并且初始值为空数组 []。

通过使用 editableKeys 和 setEditableRowKeys，你可以在组件中追踪和更新可编辑行的 key 值。通常情况下，当你添加、删除或修改可编辑行时，会使用 setEditableRowKeys 更新 editableKeys 的值，从而触发组件的重新渲染，并确保表格中的可编辑行与 editableKeys 的值保持同步。

useRef

useRef 是 React 中的一个 Hook，用于创建一个可变的引用（即 Ref），可以用来存储和访问组件或 DOM 元素的引用。

使用 useRef 创建的引用具有以下特点：

当引用的值发生改变时，不会触发组件的重新渲染。
可以通过 .current 属性访问引用的值，并且对其进行修改。
可以在函数组件和类组件中使用。

虽然 useRef 创建的引用与普通的 JavaScript 引用类型类似，但它并不是一个对象，而是一个包含 .current 属性的简单对象。因此，如果你想要在组件之间共享状态，建议使用 useState 或其他状态管理库。

  const formRef = useRef<ProFormInstance<any>>();

useRef 被用于创建一个名为 formRef 的引用，它的类型是 ProFormInstance。这个 formRef 变量将被传递给组件的 formRef 属性，以便获取表单实例并进行后续操作。

这里useRef 主要是为了获取和操作组件的表单实例。

通过给组件传递 formRef 属性，并将其设置为 useRef 创建的引用，可以将表单实例保存到 formRef.current 中。这样，你就可以在组件的其他地方访问和操作表单实例，而无需将其作为 props 传递。

useRef 的主要作用是在函数组件中存储可变值，而且不会引起组件重新渲染。