当前位置: 首页 > 网络应用技术

其次,在React中正确使用Usestate位置

时间:2023-03-08 18:07:48 网络应用技术

  ?注意:由于我们不涉及类组件,因此所有内容都将以函数组件的形式进行

  在上一节中,我们学会了如何创建一个React项目,并了解了JSX语法的本质是JavaScript。

  在本节中,让我们学习如何在React中使用Usestate来支持页面动态渲染以及一些需要注意的观点。如何避免这些坑。

  在React中,如果您想使用可支持的变量,例如以下内容?这样的写作是不可能的

  我们在浏览器中打开

  它显然已更改,但是为什么要渲染0?这仍然是因为我们编写的代码是普通的JavaScript代码。上面的代码实际上与我们在本机JavaScript中等同于我们

  我们如何在没有此值的情况下显示页面?

  我们使用React。如果我们仍然需要每次手动更新,那不是回到剑术时代,所以官方的API React

  这是一种关于React的方法。它收到默认值并返回数组。阵列包含两个项目。第一个项目是我们的数据,第二个项目是用于修改此数据的函数。

  让我们看一下浏览器中的效果

  Wuhu?,该页面是我们预期的更新成功的???

  有时我们可能会多次将同一事件称为同一事件

  也许我们想要的效果是第一个将军,然后是这种效果,但是很抱歉告诉您这是不可能的。唯一的最后一个将是最后一个。该页面只会在每次2的页面上渲染,在这里Sopay的注意力。然后,可能会有一个很大的聪明人说,我的业务中将有这样的需求,也就是说,它可能会多次设置。

  好吧,确实有这样的需求,反应提供了另一种写作方式,这很简单吗?

  这种写作方式不是直接价值,而是一个。它接受前线。在根据此操作进行一些处理之后,我们可以返回一个。因此,在这里打电话后,结果将成功显示在页面上。仍然写入最后,该值将在最后呈现)

  使用存储对象类型的数据应该是其中许多刚刚开始使用React的坑,例如me?

  我们有一个存储小姐信息的对象。我希望每次点击按钮时,小姐都可以长大一岁(小米:wdnmd ???

  让我们在浏览器中运行以查看效果是否如预期

  我们发现每个点击触发器并更新了年龄,但是为什么不触发渲染以使页面更新呢?让我们看一下源代码中的情况

  其中,我们要更新渲染的值是当前页面上渲染的值,并确定这两个值是否相等。

  这里的两个值是相同的参考,自然地,我们无法触发React的以下操作,因此每次单击时都会更新数据,但是页面上没有响应。

  同时,这意味着基本类型是确定更新之前和之后的值,这将导致页面更新(re -re -re -re -render)。知道原因是什么,那么我们知道如何解决。不仅仅是给一个新对象吗?我已经做到了,所以操作如下吗?

  如果您是用户并检查代码检查,则肯定会发现错误。提示您缺少参数部分。如果不是,则该页面将成功显示。当您单击按钮时,您会发现页面上的年龄将在更新年龄的情况下更新。但是名称消失了?

  如果您是以前写过课的朋友,那么您肯定会感到非常困惑。这是因为在钩子中,每个修改值的值用作最终值,并且不会像以前那样添加那么增量。您必须以这种方式编写以确保该领域不会丢失?

  也就是说,我们需要进行浅副本并添加我们想要更改的价值以实现我们想要的目的?

  让我们在下面做一个技术摘要:

  我希望能给你一些东西。如果您有兴趣从源代码级别探索更多相关的知识,则可以阅读下一篇文章以从源代码级别中理解,但这可能需要您具有一定的技术技能。当然,您也可以选择一个粗糙甚至直接跳过它,这不会影响您的学习反应。

  原始:https://juejin.cn/post/7101860031804473381