在React.js中使用useState钩子
钩子允许功能组件在反应中获得基于类的组件中可用的特性，从而使它们更加强大。
useState，我们将从react导入。从'react'导入{useState};这有助于我们为功能组件创建局部状态变量，并提供更新该变量的方法。
类中的状态是一个对象，但是如果需要，可以使用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中元素的顺序是固定的，这意味着第一个元素是当前值，第二个是set函数。
同样，我们可以创建多个状态变量，但是这些useState应该是函数主体中的第一条语句。
这是在React16.8中引入的，并且它向后兼容，这意味着我们可以将类转换为功能组件。
useState仅在该组件的生存期内对其进行一次初始化，并在多个渲染之间保持其值。
我们可以定义一个空数组。
const myList= useState([]);
我们可以传递先前的值并在set函数中对其进行处理
setAge(preAge=>preAge+1);
在更新值时，请确保返回一个新对象以触发重新渲染，否则react假定它是同一对象，并且不会重新渲染，如下。
onClick={(e)=>{
age.birthYear=e.target.value;
setAge(age);
}}它不会触发重新渲染，因为我们只是对当前对象进行了突变，并且对象保持不变。
代替此，我们应该创建新对象。
onClick={(e)=>{
const newAge={birthYear: e.target.value};
setAge(newAge);
}}上面的反应方式看到了新对象的创建，它将在值改变时重新呈现。
这种方法清楚地向我们展示了useState不会合并更新，而是将它们替换为新值。基于类的组件中的setState会自动合并它们。
为了避免丢失对象的其他属性，我们可以使用传播运算符
setAge((prev)=>{
return {…prev, birthYear:newValue};
});传播运算符将保留对象的其余属性，以防丢失，并更新其他属性。
请注意，所有这些挂钩仅适用于功能组件，而不适用于基于类的组件。这些挂钩在非反应式JavaScript函数中不起作用。
这些钩子不应该在条件语句或循环中使用，而应在函数体的开头在简单语句中声明。
如果您更感兴趣，那么在可以看到钩子实现的地方，分析react库的ReactFiberHooks类中的代码会很有帮助。
不必为局部状态变量提供初始值。更新以异步方式工作，并且不会阻止UI呈现。
可能以这种方式编写新的现代React代码而不是编写类。