数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学在React.js中使用useState Hook
Hooks允许React中的函数组件获得基于类的组件中可用的功能，使它们更强大。
我们将从React导入useState。`import {useState} from 'react';` 这有助于我们为函数组件创建局部状态变量，并提供更新该变量的方法。
类中的状态是一个对象，但使用useState，我们可以根据需要创建简单的原始数据类型和对象。
const test=()=>{
const [age, setAge] = useState(25);
return (
<div>
<p>Age: {age}</p>
<button onClick={()=>setAge(age+1)}>Increase Age</button>
</div>
);
}在上面的示例中，我们创建了一个名为age的状态变量，其初始值为25。useState还为我们提供了setAge方法，我们在点击按钮时使用它将age加1。
useState为我们提供了一个包含两个元素的数组：1. 当前值 2. 更新该值的函数
useState返回的元素顺序是固定的，这意味着第一个元素是当前值，第二个是设置函数。
同样，我们可以创建多个状态变量，但这些useState应该在函数体中的第一条语句。
这在React 16.8中引入，并且向后兼容，这意味着我们可以将类转换为函数组件。
useState只在组件的生命周期中初始化一次变量，并在多次渲染之间保持其值。
我们可以定义一个空数组。
const myList= useState([]);
我们可以传递前一个值并在设置函数中处理它。
setAge(preAge=>preAge+1);
更新值时，请确保返回一个新对象以触发重新渲染，否则React会将其视为相同对象，并且不会重新渲染，如下所述。
onClick={(e)=>{
age.birthYear=e.target.value;
setAge(age);
}}由于我们只是更改了当前对象，并且对象保持不变，因此它不会触发重新渲染。
我们应该创建一个新对象。
onClick={(e)=>{
const newAge={birthYear: e.target.value};
setAge(newAge);
}}通过这种方式，React会看到新对象的创建，并且它会在值更改时重新渲染。
这种方法清楚地向我们展示了useState不会合并更新，而是用新值替换它们。而基于类的组件中的setState会自动合并它们。
为了避免对象的其它属性丢失，我们可以使用扩展运算符。
setAge((prev)=>{
return {…prev, birthYear:newValue};
});扩展运算符将保留对象的其余属性，防止它们丢失，并更新其他属性。
请注意，所有这些hook只在函数组件中有效，在基于类的组件中无效。这些hook在非React JavaScript函数中也不起作用。
这些hook不应该在条件语句或循环中使用，而应该在函数体的开头以简单的语句声明。
如果您有更多兴趣，分析React库中`ReactFiberHooks`类的代码可能会有所帮助，在那里我们可以看到hook的实现。
为局部状态变量提供初始值不是必需的。更新以异步方式工作，不会阻止UI渲染。
这可能是新的现代React代码的编写方式，而不是编写类。
512 次浏览
