资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/4 个 useState Hook 示例

4 个 useState Hook 示例

ZweiZhao / 1957人阅读

摘要：示例使用显示隐藏组件这个示例是一个组件，它显示一些文本，并在末尾显示一个链接，当单击链接时，它展开剩下的文本。还有一个处理提交的函数，其中，来阻止页面刷新并打印出表单值。它使用传递一个对象，为了确保现有的状态不被覆盖，这里使用了展开运算。

为了保证的可读性，本文采用意译而非直译。

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

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

编写 class Thing extends React.Component，将函数体复制到render()方法中，修复缩进，最后添加需要的状态。

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

useState 做啥子的

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

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

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

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

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

import React, { useState } from "react";
import ReactDOM from "react-dom";

// 两个 props:
//   text - 显示的内容
//   maxLength - 在点击“read more”之前显示多少个字符
function LessText({ text, maxLength }) {
  // 创建一个状态，并将其初始化为“true”
  const [hidden, setHidden] = useState(true);


  if (text <= maxLength) {
    return {text};
  }

  return (
    
      {hidden ? `${text.substr(0, maxLength).trim()} ...` : text}
      {hidden ? (
         setHidden(false)}> read more
      ) : (
         setHidden(true)}> read less
      )}
    
  );
}

ReactDOM.render(
  ,
  document.querySelector("#root")
);

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

const [hidden, setHidden] = useState(true);

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

Hooks 实现的技巧

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

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

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

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

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

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

import React, { useState } from "react";

function StepTracker() {
  const [steps, setSteps] = useState(0);

  function increment() {
    setSteps(steps => steps + 1);
  }

  return (
    

      总共走了 {steps} 步!
      

      
    

  );
}

ReactDOM.render(
  ,
  document.querySelector("#root")
);

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

这里还可以优化的提取increment函数，可以直接将 increment 函数里面的内联到 onClick 里面：
示例:state 作为数组

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

function RandomList() {
  const [items, setItems] = useState([]);

  const addItem = () => {
    setItems([
      ...items,
      {
        id: items.length,
        value: Math.random() * 100
      }
    ]);
  };

  return (
    <>
      
      
    
        {items.map(item => (
          
  • {item.value}
    • 
        ))}
      

    
  );
}

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

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

示例：具有多个键的 state

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

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

function LoginForm() {
  const [form, setValues] = useState({
    username: "",
    password: ""
  });

  const printValues = e => {
    e.preventDefault();
    console.log(form.username, form.password);
  };

  const updateField = e => {
    setValues({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    

      
      

      
      

      
    

  );
}

如果想试试，可查看 CodeSandbox。

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

const [form, setValues] = useState({
  username: "",
  password: ""
})

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

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

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

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

交流

干货系列文章汇总如下，觉得不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，即可看到福利，你懂的。

GPU云服务器 云服务器 java 4个cpu 4核云服务器 有几个线程 服务器4个网口如何使用 useState

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110061.html

相关文章

  • 10分钟了解react新特性hooks

    摘要：简介是的新增特性。我们统一把这些操作称为副作用，或者简称为作用。由于副作用函数是在组件内声明的，所以它们可以访问到组件的和。副作用函数还可以通过返回一个函数来指定如何清除副作用。目前为止，有两种主流方案来解决这个问题高阶组件和。 Hook 简介 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 us...

    hlcfan 评论0 收藏0

  • 快速了解 React Hooks 原理

    摘要：使用该对象，可以跟踪属于组件的各种元数据位。调用你的组件这意味着它知道存储的元数据对象。下一次渲染会发生什么需要重新渲染组件由于之前已经看过这个组件，它已经有了元数据关联。 为了保证的可读性，本文采用意译而非直译。 想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ 我们大部分 React 类组件可以保存状态，而函数组件不能？ 并且类组件具有生命周期，而函数组件却不能...

    Hydrogen 评论0 收藏0

  • 03. 该尝尝React Hook了。

    摘要：我们统一把这些操作称为副作用，或者简称为作用。尽可能使用标准的以避免阻塞视觉更新。大多数情况下，不需要同步地执行。返回的对象在组件的整个生命周期内保持不变。当对象内容发生变化时，并不会通知你。 Hook Hook 是 React 16.8.0 的新增特性。 Hook 使你在非 class 的情况下可以使用更多的 React 特性。Hook 不能在 class 组件中使用。 使用规则： ...

    cikenerd 评论0 收藏0

  • React Hooks入门

    摘要：组件的职责增长并变得不可分割。是架构的重要组成部分。有许多好处，但它们为初学者创造了入门的障碍。方法使用状态钩子的最好方法是对其进行解构并设置原始值。第一个参数将用于存储状态，第二个参数用于更新状态。 学习目标 在本文结束时，您将能够回答以下问题： 什么是 hooks? 如何使用hooks？ 使用hooks的一些规则? 什么是custom hook(自定义钩子)？ 什么时候应该使用 ...

    zhangke3016 评论0 收藏0

  • React Hook起飞指南

    摘要：起飞指南作者元潇方凳雅集出品目前放出来了个内置，但仅仅基于以下两个，就能做很多事情。行代码实现一个全局元潇根组件挂上即可子组件调用随时随地实现一个局部元潇的本质是的一个语法糖，感兴趣可以阅读一下的类型定义和实现。 React Hook起飞指南 作者：元潇 方凳雅集出品 16.8目前放出来了10个内置hook，但仅仅基于以下两个API，就能做很多事情。所以这篇文章不会讲很多API，...

    姘搁『 评论0 收藏0

发表评论

登陆后可评论

0条评论

ZweiZhao

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<