useState 函数式状态管理
本文首发说说前端,可点击查看原文支持作者。
React 有两种方式可以实现组件的定义,一种是通过函数实现,一种是通过class类实现。一般的通过class类实现的组件我们可以看到足够多的生命周期、状态state可供操作,而函数式组件则没有生命周期和状态值state。对就性能而言,由于函数组件需要初始化组件,而函数组件是直接通过return 返回JSX,因此函数组件的性能要优于类组件。为了性能考虑,一般的我们推荐使用函数组件来实现组件的定义。
出于操作考虑,React自从16.8.0版本开始支持Hook功能,让我们可以通过hook方式在函数组件中实现state、生命周期的监听。这里,我们介绍hook的一种用法useState,通过useState来实现状态值的操作。操作之前,需要注意几点:
只能在React函数中调用
即是必须在组件函数中调用,不可在一般的js中使用useState等hook实现。在函数返回部分顶部调用
不可在jsx代码部分使用hook实现,须得如同js的变量定义方式使用useState等hook实现。
Class状态管理
在没有hook之前,我们通常使用class组件的方式来实现状态的管理:
import React, { Component } from 'react';export default class extends Component {constructor(props) {super(props);this.state = {date: new Date(),counter:0};}render() {return (<div><h1>Hello, world!</h1><h2>It is {this.state.date.toLocaleTimeString()}.</h2><button onClick={() => this.state((state, props) => ({counter: state.counter + 1}))}>Click me</button></div>);}}
当使用useState时
当使用hook在函数组件中实现状态管理,对我们而言操作是变得更简单了。
import React, { useState } from 'react';function Counter({initialCount}) {const [count, setCount] = useState(initialCount);return (<>Count: {count}<button onClick={() => setCount(initialCount)}>Reset</button><button onClick={() => setCount(prevCount => prevCount - 1)}>-</button><button onClick={() => setCount(prevCount => prevCount + 1)}>+</button></>);
}
如何使用useState
通过上面的示例,我们基本可以简单的总结useState的使用方法。
- 定义state
我们可以通过useState来定义一个state对象:
//useState格式
const [state, setState] = useState(initialState);
useState通过传入一个初始的对象值initialState,从而返回一个状态值state(初始状态值为initialState),和一个更新状态的更新函数setState。
- 使用更新函数
使用上述返回的更新函数来更新状态值:
setState(state+1);
useState 函数式状态管理相关推荐
- nuxt3.0学习-二、nuxt3.0的请求相关内容、状态管理(useState/Pinia)、cookie管理(useCookie)、token续期
请求相关内容 nuxt3.0提供的多种数据访问 API 上一次是nuxt3.0的安装和约定式的使用 接下来就是使用请求调整,Nuxt3 中提供的多种数据访问 API: $fetch: 使用时机: 首屏 ...
- react获取全局_使用react hooks实现的简单全局状态管理
注意,此代码存储库已被弃用,不会再更新维护了. Note that this code repository has been deprecated and will not be updated a ...
- Mobx和Mobx-react:集中式状态管理
一.Mobx (1) Mobx是一个功能强大,上手非常容易的状态管理工具. (2) Mobx背后的哲学很简单: 任何源自应用状态的东西都应该自动地获得.只获取与自己相关的数据,不获取无关数据(redu ...
- 一文带你全面体验八种状态管理库
动手点关注 干货不迷路 写在前面 状态管理库伴随着数据驱动类框架诞生以来,一直都是个带争议的话题,社区里关于这个方向的讨论文章也是数不胜数,本文写作的目的并不是去详细解答每一款状态库的设计原理和最佳实 ...
- 教你写一个 React 状态管理库
自从 React Hooks 推行后,Redux 作为状态管理方案就显得格格不入了.Dan Abramov 很早就提到过 "You might not need Redux",开发 ...
- 给前端快速上手摸鱼一把主流状态管理库,这家伙真香
前言 大家好,我是虚竹. 众所周知,React是一个专注于UI层的库,不同于Vue.Angular等框架,React 的各种状态管理方案一直是在百花齐放.群魔乱舞.除了热门库Redux.Mobx.Re ...
- React组件设计实践总结05 - 状态管理
今天是 520,这是本系列最后一篇文章,主要涵盖 React 状态管理的相关方案. 前几篇文章在掘金首发基本石沉大海, 没什么阅读量. 可能是文章篇幅太长了?掘金值太低了? 还是错别字太多了? 后面静 ...
- redux异步action_Redux数据状态管理
Redux 中文文档(https://www.redux.org.cn/) Redux入门教程(快速上手)(https://segmentfault.com/a/1190000011474522?fr ...
- hooks组件封装 react_名符其实的react下一代状态管理器hox
自从 React16 版本发布 Hooks 以来,大家纷纷上车尝鲜.毫无疑问, Hooks 在一定程度上解决了组件间功能和逻辑复用的问题,在组件间的逻辑的封装和复用确实真香,但 Hooks 在数据状态 ...
最新文章
- Atitit. 脚本语言的断点单步调试的设计与实现 attialx 总结 php 参照java
- Android——Intent动作汇总(转)
- 异想-天开 python---while、for、if-else 循环学习
- 【算法】漫画:如何找到链表的倒数第n个结点?
- keil4如何设置自动缩进_如何设置私聊自动回复?
- 一张图看懂encodeURI、encodeURIComponent、decodeURI、decodeURIComponent的区别
- clientmacaddr进不去系统win10_教你一分钟搞定戴尔电脑WIN10改WIN7
- html获取元素坐标,js 获取元素相对于页面的坐标(示例)
- 独家揭秘阿里云SQL Server AlwaysOn集群版重大突破
- Dev C++软件的下载安装与使用
- 【编程语言】面向对象的六大原则
- 关于高德地图setCity()方法失效的NNNNNNN坑
- 微信支付“举刀”挥向谁?
- 茄子快传和腾讯全民Wifi配合使用
- android实现拍照、相册选图、裁剪功能,兼容7.0以及小米
- 计算机网卡更改mac地址,Mac电脑网卡MAC地址修改的具体步骤
- 本地文件上传FTP或远程目录
- @Compoment
- 特征选择之方差选择法VarianceThreshold
- Qt笔记(三十)之Ubuntu安装Qt5