react 进阶必学 hook (一):useState 来一碗大碗宽面

本文主要是介绍react 进阶必学 hook (一):useState 来一碗大碗宽面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

系列文章传送门:

react 进阶必学 hook (一):useState 来一碗大碗宽面

react 进阶必学 hook (二):useEffect 专治不吃宽面

react 进阶必学 hook (三):useContext 面馆分店开张了

react 进阶必学 hook (四):自定义hook

react 进阶必学 hook (五):额外的hook

什么是hook

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

更详细介绍到官网了解

hook解决的问题

在hook出现之前,使用react有一些痛点,简单整理如下几点:

  1. 由于业务变动,函数组件必须不得不改为类组件
  2. 组件逻辑复杂时难以开发和维护
  3. 一个逻辑难以跨组件使用

hook出现后可以在底层解决以上几个问题,可以将组件中的逻辑抽象成一个可以复用的隔离模块;并且编写数据更改逻辑的时候也不在需要使用生命周期函数,因此也不在需要更改呈类组件;同时可以将每一变量写成单独的数据流,类似一个管道,跟类组件在生命周期中集中处理state相比,方便维护状态,实现逻辑。

hook成员

在这里插入图片描述

上图中显式的是官方提供的hook,也可以自己编写hook,可以通过自己写hook解决逻辑跨组件使用的问题。

useState

1. 先创建一个吃面的app

npx create-react-app my-app

然后创建一个函数式组件Counter

import React from 'react';export default function Counter() {const count = 1;return (<div><h1>{count}碗大碗宽面</h1></div>);
}

使用组件后:
在这里插入图片描述

2. 添加加一碗的需求

这里加一个button,点击就会加一碗,如果不用hook写的话,那么只能将函数式组件改写成类组件:

export default class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 1};}render () {const {count} = this.state;return (<div><h1>{count}碗大碗宽面</h1><button onClick={()=> this.setState({count: count+1})} style={{"height":"40px"}}>加一碗</button></div>);}
}

在这里插入图片描述

有了hook后,可以使用hook中useState的在函数式组件中实现同样的功能:

import React, {useState} from 'react';export default function Counter() {const [count, setCount] = useState(1);return (<div><h1>{count}碗大碗宽面</h1><button onClick={()=> setCount(count+1)} style={{"height":"40px"}}>加一碗</button></div>);
}

不难发现使用hook的代码更加简洁,类函数中讨厌的this也不在了。

3. useState功能介绍

先看一下官方介绍:

在这里插入图片描述

解释一下useState的使用,主要关注三个东西:

  1. 状态:既放在state中的变量,比如上面例子中的count
  2. 更改状态的函数:类似class组件中的this.setState,上面例子的setCount,通过setCount(count+1)重新赋值更改状态
  3. 初始状态:在初始化hook的时候通过useState(1)赋值,其中1就是初始状态
4. 多个hook一起使用

我们不光有加面的需求,有的人吃不了大碗,有的人不爱吃宽面。

可以通过创建多个useState来控制不通状态的更改,而且状态可以是不同类型的变量,维护起来逻辑清晰

import React, {useState} from 'react';export default function Counter() {const [count, setCount] = useState(1);const [big, setSize] = useState(true);const [type, setType] = useState("宽面");const size = (big)=>big? "大":"小";return (<div><h1>{count}{size(big)}{type}</h1><button onClick={()=> setCount(count+1)} style={{"height":"40px"}}>加一碗</button><button onClick={()=> setSize(!big)} style={{"height":"40px"}}>{size(!big)}</button><button onClick={()=> setType("细面")} style={{"height":"40px"}}>不想吃宽面</button></div>);
}

更改后实现如下:

在这里插入图片描述

未完待续。。。。。。。。。。。。。。。。

这篇关于react 进阶必学 hook (一):useState 来一碗大碗宽面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/912773

相关文章

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

从基础到进阶详解Python条件判断的实用指南

《从基础到进阶详解Python条件判断的实用指南》本文将通过15个实战案例,带你大家掌握条件判断的核心技巧,并从基础语法到高级应用一网打尽,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一... 目录​引言:条件判断为何如此重要一、基础语法:三行代码构建决策系统二、多条件分支:elif的魔法三、

Python进阶之列表推导式的10个核心技巧

《Python进阶之列表推导式的10个核心技巧》在Python编程中,列表推导式(ListComprehension)是提升代码效率的瑞士军刀,本文将通过真实场景案例,揭示列表推导式的进阶用法,希望对... 目录一、基础语法重构:理解推导式的底层逻辑二、嵌套循环:破解多维数据处理难题三、条件表达式:实现分支

基于Python编写自动化邮件发送程序(进阶版)

《基于Python编写自动化邮件发送程序(进阶版)》在数字化时代,自动化邮件发送功能已成为企业和个人提升工作效率的重要工具,本文将使用Python编写一个简单的自动化邮件发送程序,希望对大家有所帮助... 目录理解SMTP协议基础配置开发环境构建邮件发送函数核心逻辑实现完整发送流程添加附件支持功能实现htm

基于Python实现进阶版PDF合并/拆分工具

《基于Python实现进阶版PDF合并/拆分工具》在数字化时代,PDF文件已成为日常工作和学习中不可或缺的一部分,本文将详细介绍一款简单易用的PDF工具,帮助用户轻松完成PDF文件的合并与拆分操作... 目录工具概述环境准备界面说明合并PDF文件拆分PDF文件高级技巧常见问题完整源代码总结在数字化时代,PD

javaSE类和对象进阶用法举例详解

《javaSE类和对象进阶用法举例详解》JavaSE的面向对象编程是软件开发中的基石,它通过类和对象的概念,实现了代码的模块化、可复用性和灵活性,:本文主要介绍javaSE类和对象进阶用法的相关资... 目录前言一、封装1.访问限定符2.包2.1包的概念2.2导入包2.3自定义包2.4常见的包二、stati

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

C语言进阶(预处理命令详解)

《C语言进阶(预处理命令详解)》文章讲解了宏定义规范、头文件包含方式及条件编译应用,强调带参宏需加括号避免计算错误,头文件应声明函数原型以便主函数调用,条件编译通过宏定义控制代码编译,适用于测试与模块... 目录1.宏定义1.1不带参宏1.2带参宏2.头文件的包含2.1头文件中的内容2.2工程结构3.条件编

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

从入门到进阶讲解Python自动化Playwright实战指南

《从入门到进阶讲解Python自动化Playwright实战指南》Playwright是针对Python语言的纯自动化工具,它可以通过单个API自动执行Chromium,Firefox和WebKit... 目录Playwright 简介核心优势安装步骤观点与案例结合Playwright 核心功能从零开始学习