React Hooks之useState、useRef
React Hooks是React 16.8版本引入的新功能，它允许我们在函数组件中使用状态和其他React特性，而无需编写类组件。其中两个常用的React Hooks是useState和useRef。
useState是一个函数，用于在函数组件中声明和管理状态。它接受一个初始状态值作为参数，并返回一个包含当前状态值和更新状态值的数组。通过解构赋值，我们可以轻松地获取和更新状态。
例如，我们可以在函数组件中使用useState来创建一个计数器：
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
);
}
在上面的例子中，我们使用useState来声明一个名为count的状态，并将其初始值设置为0。我们还声明了一个名为setCount的函数，用于更新count状态。当按钮被点击时，我们调用increment函数，将count状态值增加1，并通过setCount函数来更新count的值。
useRef是另一个React Hook，它允许我们在函数组件中创建可变的引用。useRef返回一个可变的ref对象，它在组件的整个生命周期内保持不变。
一个常见的用例是将ref对象绑定到DOM元素上，以便在必要时访问DOM元素的属性和方法。
例如，我们可以使用useRef来获取输入框的值：
import React, { useRef } from 'react';
function Input() {
const inputRef = useRef();
const handleButtonClick = () => {
alert(inputRef.current.value);
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={handleButtonClick}>Show Value</button>
</div>
);
}
在上面的例子中，我们使用useRef创建了一个名为inputRef的引用。然后，我们将inputRef引用传递给文本输入框的ref属性，以便将DOM节点与inputRef关联起来。
当按钮被点击时，我们通过inputRef.current.value获取输入框的值，并通过alert函数显示。由于inputRef是一个可变对象，它可以在组件的整个生命周期中保持其状态，不会随着组件重新渲染而改变。
总结起来，useState允许我们在函数组件中声明和管理状态，而useRef允许我们在函数组件中创建可变的引用。这两个React Hooks为我们提供了更方便和灵活的方式来处理状态和DOM操作。
原文地址：https://blog.csdn.net/m0_74801194/article/details/135400768
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！