钩子允许功能组件在反应中获得基于类的组件中可用的特性,从而使它们更加强大。
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代码而不是编写类。