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



摘要： React示例教程。

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

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

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

useState 做啥子的

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

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

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

示例1：使用 useState 显示/隐藏组件

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

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

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

Hooks 实现的技巧

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

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

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

示例2：根据之前的状态更新状态

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

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

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

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

示例3: state 作为数组

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

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

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

示例4：具有多个键的 state

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

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

如果想试试，可查看 CodeSandbox。

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

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

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

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

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/59133.html