usestate 是一个 react hook，它允许您通过返回包含两个变量的数组来向组件添加状态：state、setstate。当前状态以及调用时成为 setter 函数的函数。它可用于跟踪应用程序中需要跟踪的数据或属性，例如字符串、数字、布尔值、数组或对象。
示例：
const [state, setstate] = usestate();
简单来说，状态会在任何时候发生变化并且需要更新，因此“setstate”将更新状态，随着时间的推移触发组件的重新渲染。
此外，usestate 可以保存任何类型的 javascript 值，包括对象。始终记住的一点是，您永远不应该直接更改处于 react 状态的对象。首先，您需要创建一个新副本或创建现有副本的副本，然后将 state 设置为新副本。例如：
// objectsconst [state, setstate] = usestate({name: 'marlo', age: 56});const updatename = () => { setstate({...state, name: 'karlo'});};const updateage = () => { setstate({...state, age: 96});};---------------------------------------------------------------------------------// arraysconst [array, setarray] = usestate([1, 2, 3, 4, 5]);const additem = () => { setarray([...array, 6]);};const removeitem = () => { setarray(array.slice(0, array.length - 1));};
要在 react 组件中使用 usestate，首先需要从 react 导入它，通过两种不同的方式在组件页面顶部编写以下代码，两种方式都可以完美工作，因此您可以选择您的毒药。
import react from 'react'; import {usestate} from 'react';
或者你可以写成一行
import react, {usestate} from 'react';
react hook usestate 可以在组件的顶层或自定义钩子内调用，但不能在循环或条件内调用。
const [initialstate, setinitialstate] = usestate();
initialstate 仅在初始渲染期间使用，在后续渲染中将被忽略。
initialstate 函数被传递给 setinitialstate 函数，它以之前的状态作为参数，并返回一个 newstate。
此外，在我看来，对于在 react 中什么地方可以使用 hooks 和什么地方不可以使用 hooks 没有特殊的规则。当然，您必须谨慎且有策略地保持代码井井有条。
在我的一个项目中，构建一个 spa（单页应用程序），有各种组件来实现我的目标。组织良好的秘诀是跟踪您的组件。例如，您的 app.js 组件将根据需要更新的数据类型使用 {usestate}。
让我们介绍 react 中的另一个强大的钩子：{useeffect}，并将其与 {usestate} 一起使用来解释这些钩子如何对数据执行操作。以下示例来自我在最近的项目中使用的 app.js 组件。我正在处理玩具的 db.json 文件数据，这将有助于儿童第一年的发展。这是我的端点 http://localhost:4000/toys 来帮助您了解 {usestate} 和 {useeffect} 如何在应用程序组件内部工作的过程。
第一：初始化状态：
const [toys, settoys] = usestate([]);
这一行初始化了一个状态变量toys，用一个空数组[]作为初始值。settoys 是一个用于更新玩具状态的函数。
第二： 获取组件挂载数据：
useEffect(() => { fetch("http://localhost:4000/toys") .then(response => response.json()) .then(data => setToys(data)); }, []);
{useeffect} 钩子用于在组件中执行副作用。{useeffect} 中的函数会在组件挂载时运行一次，因为依赖数组 ([]) 为空。
第三： 获取玩具数据：
fetch(“http://localhost:4000/toys”)此行向指定的 url 发出 get 请求以获取玩具数据。.then(响应=> response.json())来自 fetch 请求的响应被转换为 json 格式。.then(toysdata => settoydata(toysdata));json 数据（toysdata）用于使用 settoys 函数更新玩具状态。
要更深入地了解 {usestate, useeffect} 的工作原理，您可以访问 react 官方网站。此外，另一个有用的来源是 w3schools 网站，这是我个人最喜欢的。它开门见山地提供了示例，您可以在自己的浏览器中尝试。最后，如果您需要更多技术资源，mdn 网络文档将为您提供帮助。
以上就是React HooK= { 简要解释};的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1490567.html
微信扫一扫 
支付宝扫一扫 
