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显示element-plus所有icon

效果 代码 <template><div style="display: flex;flex-wrap: wrap"><component :is="name" style="width: 2rem; margin-left: 2rem" v-for="(name,index) in icons" :index="index" :key="index"></component></div>

bimface开发实战-vue版

效果 演示地址 框架 bimface + vue3.0 代码地址 gitee地址 使用 yarn install yarn serve

vue3.0 v-model 的使用

前言 组件功能:把 el-switch 的值 false/true, 动态绑定输出为 0, 1 组件代码 封装el-switch组件,当el-switch的值为false,输出值为0;当el-switch的值为true,输出值为1; <template><el-switch v-model="switchValue" @change="changeEvent"></el-switch

Vue学习笔记:拦截器

原文地址 Vue可以对http request和http response添加全局拦截,最典型的例子就是在请求头里添加token,和监测是否登录,如果没有登录则跳转到登录页面。 main.js中添加拦截器的代码: 1. request 拦截器 //request 拦截器,在请求头中加tokenaxios.interceptors.request.use(config => {if (lo

css3属性之background-size兼容ie8方案

解决方案 在ie8浏览器可能背景图片无法自适应全屏,这时候加入设置filter属性即可解决问题,同时加入height:100 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.bg{background: #EAEAEA;height: 100%;background

vue cli4之Eslint初使用

一.介绍 ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。在许多方面,它和 JSLint、JSHint 相似,除了少数的例外: ESLint 使用 Espree 解析 JavaScript。ESLint 使用 AST 去分析代码中的模式ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加

vue router路由解析

一、前言 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。 二、安装 1.安装包 npm install vue-router 2.项目引用 在cli4脚手架目录router下index.js中引用 import Vue from 'vue'import VueRouter from 'vue-rou

vue多语言插件vue-i18n

安装vue-i18n npm install vue-i18n -S 使用 1.在main.js中引入vue-i18n import VueI18n from 'vue-i18n'Vue.use(VueI18n) 2.vue-i18n初始化 const i18n = new VueI18n({locale: 'cn', // 默认语言messages}) 3.vue-i

Vue.js之Socket.IO 使用

一.前言 在很多需求业务中,都需要浏览器和服务器实时通信来实现功能,比如:扫码登录(扫码后,手机确认登录,PC网页完成登录并跳转)、订单语言提醒等,这些都是建立在两端实时通信的基础上的。对前端而言,来实现浏览器和服务器实时通信,最好的选择就是Socket.IO库,能够快速的实现两端实时通信功能。 1、什么是 Socket.IO? Socket.IO是一个WebSocket库,可以在浏览器和服

Vue之组件间的数据通信

一、父组件与子组件传值 1.pros 通过 Prop 父组件向子组件传递数据。props是单向绑定的,即只能父组件向子组件传递,不能反向,是 Vue 的设计理念之单向数据流。 2.$emit 官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。$emit 绑定一个自定义事件event,当这个这个语句被执行到的时候,就会将参数arg传递给父组件,父组件通过@event监听并接收参数。