1. 首页

4 个 useState Hook实战应用示例

到 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 <span>{text}</span>;
  }

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

ReactDOM.render(
  <LessText
    text={`专注、努力是成功的真正关键。把你的眼睛盯在目标上,然后朝着目标迈出下一步`}
    maxLength={35}
  />,
  document.querySelector('#root')
);


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


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

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

Hooks 实现的技巧

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

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

这也不是很神奇的事情,主要它依赖于你可能没有想过的事实:咱们写的的组件是由React调用 ,所以它可以在调用组件之前事先做好一些工作。 而且,渲染组件的行为不仅仅是函数调用。 像<Thing />这样的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 ( <div> 总共走了 {steps} 步! <br /> <button onClick={increment}> 点点我,步数不是个事! </button> </div> ); } ReactDOM.render( <StepTracker />, document.querySelector('#root') );

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

这里还可以优化的提取increment函数,可以直接将 increment 函数里面的内联到 onClick 里面:


<button onClick={() => setSteps(steps => steps + 1)}> I took another step </button>

示例:state 作为数组

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


function RandomList() { const [items, setItems] = useState([]); const addItem = () => { setItems([ ...items, { id: items.length, value: Math.random() * 100 } ]); }; return ( <> <button onClick={addItem}>Add a number</button> <ul> {items.map(item => ( <li key={item.id}>{item.value}</li> ))} </ul> </> ); }

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

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

示例:具有多个键的 state

再来看看,state为对象的例子,创建一个包含2个字段的登录表单:usernamepassword

下面示例主要展示如何在一个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 ( <form onSubmit={printValues}> <label> Username: <input value={form.username} name="username" onChange={updateField} /> </label> <br /> <label> Password: <input value={form.password} name="password" type="password" onChange={updateField} /> </label> <br /> <button>Submit</button> </form> ); }

如果想试试,可查看 CodeSandbox

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


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

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

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

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

*

码农进阶题库,每天一道面试题 or Js小知识 https://www.javascriptc.com/interview-tips/

作者:前端小智
链接:https://segmentfault.com/a/1190000019975655

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:4 个 useState Hook实战应用示例

链接:https://www.javascriptc.com/3425.html

« 送你27 个提升开发人员幸福指数的 VsCode 插件
13个攻城狮都该知道的JavaScript 来操作 DOM的技能»
Flutter 中文教程资源

相关推荐

QR code