资讯专栏INFORMATION COLUMN

React Hooks系列之useState

SimonMa / 2993人阅读

摘要:在出现之前,组件添加,只能在中完成。方式之后,可以在组件中创建了,不用再每次都需要创建一个,更加函数式了。展示了如何初始化表单数据,和更新对应的字段

在React Hooks出现之前,组件添加state, 只能在class中完成。

class方式

React 16.7 alpha之后,可以在function组件中创建state了,不用再每次都需要创建一个class component,更加函数式了。

useState方式

不同场景下,应该如何使用useState

场景1:隐藏/显示一个组件

场景2:根据上一个state更新state

setSteps方法中第一个参数是prevState

场景3:state是一个数组值

场景4:state是一个对象

下边是一个表单,表单中有username, password两个字段。展示了如何初始化表单数据,和更新对应的字段

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

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

相关文章

  • 快速了解 React Hooks 原理

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

    Hydrogen 评论0 收藏0
  • react hooks 全面转换攻略(一) react本篇useState,useEffect

    摘要:经典案例此例子中是最新的语法其中是他的值是用来设置值的函数是初始值该初始值可以接受任何参数但是记得当他接受为一个函数时就变成了延迟初始化该函数返回值即为这两种初始化方式是相等的但是在函数为初始值时会被执行一次这里只会在初始化的时候执行中的 useState 经典案例: import { useState } from react; function Example() { con...

    KnewOne 评论0 收藏0
  • 10分钟了解 react 引入的 Hooks

    摘要:最近官方在大会上宣布内测将引入。所以我们有必要了解,以及由此引发的疑问。在进一步了解之前,我们需要先快速的了解一些基本的的用法。如何解决状态有关的逻辑的重用和共享问题。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好,我是谷阿莫,今天要将的是一个...,哈哈哈,看到这个题我就...

    Lucky_Boy 评论0 收藏0
  • React手稿State Hooks of Hooks

    摘要:官方也陈述,接下来的的工作会投入到中。从目前官方的文档可以看出,从以下四个方面来提高的编码。生命周期自定义方法的主要用途是替代之前版本的组件。说明到目前为止,在已发布的版本中有该功能,想体验该功能,必须安装。 React Hooks React在16.7.0-alpha.0版本中提到了Hooks的概念,目前还是Proposal阶段。 官方也陈述,接下来的90%的工作会投入到React ...

    DC_er 评论0 收藏0
  • React系列 --- 从Mixin到HOC再到HOOKS(四)

    摘要:返回元素的是将新的与原始元素的浅层合并后的结果。生命周期方法要如何对应到函数组件不需要构造函数。除此之外,可以认为的设计在某些方面更加高效避免了需要的额外开支,像是创建类实例和在构造函数中绑定事件处理器的成本。 React系列 React系列 --- 简单模拟语法(一)React系列 --- Jsx, 合成事件与Refs(二)React系列 --- virtualdom diff算法实...

    Lionad-Morotar 评论0 收藏0

发表评论

0条评论

SimonMa

|高级讲师

TA的文章

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