react组件调用方法（react 常用组件库）

科技前沿 • 2025-05-21 20:49 • 阅读 33

大家好，我是讯享网，很高兴认识大家。

摘要： React示例教程。

到 React 16.8 目前为止，如果编写函数组件，然后遇到需要添加状态的情况，咱们就必须将组件转换为类组件。

编写，将函数体复制到方法中，修复缩进，最后添加需要的状态。

今天，可以使用 Hook 获得相同的功能，并为自己节省了工作时间。在本文中，主要介绍 hook。

hook 允许咱们向函数组件添加状态，我们通常称这些为“ hooks”，但它们实际上是函数，与 React 16.8 捆绑在一起。通过在函数组件中调用，就会创建一个单独的状态。

在类组件中，总是一个对象，可以在该对象上添加保存属性。

对于 hooks，state 不必是对象，它可以是你想要的任何类型-数组、数字、布尔值、字符串等等。每次调用都会创建一个块，其中包含一个值。

这个示例是一个组件，它显示一些文本，并在末尾显示一个链接，当单击链接时，它展开剩下的文本。

仅用一行代码，我们就使这个函数组件有状态：

但是这个函数到底在做什么呢?如果每次渲染都调用它(确实如此)，它又是如何保留状态的。

这里的“神奇”之处是，React在每个组件的幕后维护一个对象，并且在这个持久对象中，有一个“状态单元”数组。当你调用时，将该状态存储在下一个可用的单元格中，并递增数组索引。

假设你的总是以相同的顺序调用(如果遵循 hooks 的规则，它们将是相同的顺序)，React能够查找特定调用的前一个值。对的第一个调用存储在第一个数组元素中，第二个调用存储在第二个元素中，依此类推。

这也不是很神奇的事情，主要它依赖于你可能没有想过的事实：咱们写的的组件是由调用，所以它可以在调用组件之前事先做好一些工作。而且，渲染组件的行为不仅仅是函数调用。像这样的被编译为 - 显然 React 可以控制它的调用方式和时间。

看看另一个例子：根据前一个值更新的值。

咱们要造个计步器，每点击一次按钮，就计一次，点击完后，它会告诉你你走了多少步。

首先，通过调用创建一个新的，并将其初始化为。它返回的当前值和函数来更新，用函数来对进行增 1 操作。

这里还可以优化的提取函数，可以直接将函数里面的内联到里面：

记住，可以保存任何你想要的值。下面是一个随机数列表的例子，单击按钮将向列表添加一个新的随机数：

注意，我们初始化为空数组，并在函数中更新值。

更新不会将旧值“合并” - 它会使用新值覆盖。这与在类中的工作方式不同。

再来看看，为对象的例子，创建一个包含2个字段的登录表单：和。

下面示例主要展示如何在一个对象中存储多个值，以及如何更新单个值。

如果想试试，可查看 CodeSandbox。

首先，我们创建一个片段，并用一个对象初始化它

这看起来像是在类中初始化状态的方式。

还有一个处理提交的函数，其中，来阻止页面刷新并打印出表单值。

函数更有意思。它使用传递一个对象，为了确保现有的状态不被覆盖，这里使用了展开运算()。