首页 > web前端 > js教程 > React HooK= { 简要解释};

React HooK= { 简要解释};

PHPz
发布: 2024-08-19 17:02:36
原创
892 人浏览过

React HooK= { Briefly Explained};

useState 是一个 React Hook,它允许您通过返回包含两个变量的数组来向组件添加状态:state、setState。当前状态以及调用时成为 setter 函数的函数。它可用于跟踪应用程序中需要跟踪的数据或属性,例如字符串、数字、布尔值、数组或对象。
示例:

const [state, setState] = useState();
登录后复制

简单来说,状态会在任何时候发生变化并且需要更新,因此“setState”将更新状态,随着时间的推移触发组件的重新渲染。

此外,useState 可以保存任何类型的 Javascript 值,包括对象。始终记住的一点是,您永远不应该直接更改处于 React 状态的对象。首先,您需要创建一个新副本或创建现有副本的副本,然后将 State 设置为新副本。例如:

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [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())
    • 获取请求的响应被转换为 JSON 格式。
  • .then(toysData => setToyData(toysData));
    • JSON 数据 (toysData) 用于使用 setToys 函数更新玩具状态。

要更深入地了解 {useState, useEffect} 的工作原理,您可以访问 React 官方网站。此外,另一个有用的来源是 w3schools 网站,这是我个人最喜欢的。它开门见山地提供了示例,您可以在自己的浏览器中尝试。最后,如果您需要更多技术资源,mdn 网络文档将为您提供帮助。

以上是React HooK= { 简要解释};的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板