在React.js中使用useState钩子

  • Z时代
  • 2024-01-10
  • 分类：综合

钩子允许功能组件在反应中获得基于类的组件中可用的特性，从而使它们更加强大。

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应该是函数主体中的第一条语句。

这是在React 16.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代码而不是编写类。

以上是 在React.js中使用useState钩子 的全部内容， 来源链接： utcz.com/z/326378.html

回到顶部