React函数式组件之useState用法

自React版本16.8之后,

大雪美景几何.jpg

增加了Hook的新特性,其中包含有useState,useEffect,useContex的3种新方式。
众所周知,在React中一切元素都是组件化编程模式,主要有2种组件定义方式,一种是在es6语法下通过class类提供的继承自React.Component 的定义方式,还有一种是函数式组件,即如以function定义的函数组件。

一.React安装相关

工欲善其事,必先利其器。

在我们想研究学习React的useState用法前,首先我们先要把React环境给配置好,当然这块网络教程也很多,这里就简单说明并过滤一下的情况。

1.React基本介绍和安装步骤说明

1.1.React基本介绍

众所周知,React是Facebook为了替代传统的JS下的MVC框架不满意,所以先行开发的一套供其内部使用的前端框架,后于2013年对外开源,然后发展至今的一套前端框架。所以既然React实现的底层是前端框架,那么就要求想学习会React的开发者,首先要对传统的HTML,CSS以及JS有一定的了解和开发经验,不然后面会吃一些裤头的。

对于React的安装其实很简单,在安装React之前,首先需要安装Node和npm环境配置

1.2.安装Node和npm

这块具体安装方式,网络一搜一大堆,就不多做介绍了,只需要强调一点,按照的node和npm版本最好分别在14和5.2之后,这样可以用npm自带的包来创建react项目,实现快速开发的目的。

1.3.npx create-react-app my-app 命令创建我们的React程序

注意这里的npx 是在node14和npm5.2之后npm自带的一个管理包工具,当然作为新手,一般不建议用该命令去创建项目,而是后面要加上一点内容,如后面的我们的第一个React程序中所示。

另外需要注意的是在React中创建项目名称中不能有大写字母,不然会报如下错误

React 包含大写字母时创建报错.png

2.我们的第一个React程序

我们创建第一个React程序最好采用如下的方式,即为

npx create-react-app hello-world --template typescript

React 成功创建项目效果.png

之后按照提示分别执行上图中的2个命令
cd hello-world
yarn start
之后我们的第一个React项目就显示在眼前,如下所示:

成功运行第一个React项目.png

通过该命令创建的React程序支持ts语法,关于ts的比js到底多了哪些功能,详细可参考这篇文章:TypeScript超详细入门教程(上)

这里汇总下,简单来说,通过ts来替代js实现的方式,因为js是弱类型编码语言,在开发中无法及时发现错误和漏洞;
如果通过ts就可以让开发者在编码过程中养成良好的开发习惯,从而实现可以让开发者(特别是新手)在编码阶段就及早发现一些不规范的命名了,变量赋值了,定义了等低级错误。
而且ts还比js多了更多的解决问题的方式展示,总之tsjs实现更友好一些。

二.userState功能展示说明

好了,前面铺垫了那么多,终于到了本篇文章的重点了,本篇文章的重点即为通过React的函数式编程组件在useState技术的帮助下实现一个简单的增删改查案例展示。

1.hook助攻下useState领衔函数式组件大发展

首先我们来简单讨论下函数式组件和传统的类组件2种方式定义组件的异同点,类组件定义相对好理解一些;
因为无论是通过props来设置属性,还是通过state来设置状态从而实现改变对应的dom实现页面刷新,都是一环套一环的,好理解一些,
但其缺点是对应与组件状态必须要么实时跟踪,要么必须通过数据改变,然后setstate对应的组件状态,界面才能刷新,实现相对麻烦;

如果在16.8之前React没有提供这些hook方法的话,函数式组件由于本身实质是一个函数,所以无法包含生命周期方法,还有一些属性无法像类一样部分拥有等缺陷,大部分情况下都被开发者束之高阁。

但在16.8之后特别是useState和useEffect,一个解决了数据改变,界面就可以及时刷新功能,一个解决了生命周期实现的方式。本篇主要讲解useState的用法,那么我们就来看看useState的神功吧!

2.userState技术功能实现小案例说明

在本案例中通过定义一个App的函数和SomeChild类,来实现对该App函数组件的增删改功能,具体表现为通过输入框输入该SomeChild类的名字,年龄,学校后,实现生成一个孩子;
当点击 不满意-重生 按钮时,相当于修改,即可以实现编辑孩子对应的属性,编辑完毕之后,继续点击生一个按钮时,实现对孩子信息的编辑,也可以点击打掉-重来,则相当于删除功能,即实现对该孩子的删除这么一个小功能实现。

3.useState代码实现说明

可以分为3部曲,即为导——>定——>用三步曲。

3.1.导,即导入类库,如下所示

import React,{useState} from 'react';

3.2.定,即定义被useState所包裹的属性才能数据变了,界面跟着变的效果。

说到这里,可以闲扯一点关于useState的功能实现原理,
即简单来说为MVVM模型的实现,数据和界面互相绑定,从而实现对数据一旦改变,界面就跟着改变的效果,
这点类似iOS中的KVO,Vue中的watch观察者模式功能。

// 定义类的userState下的变量
  const [child,creatChild] = useState(new SomeChild())
  const [childList,setChildList] = useState([])

3.3.用,用是核心,要怎么用呢
关键在于怎么理解定义中的如child creatChild功能,其实,child就是这个数据变化的一个临时变量(可以这么理解),
即当前要操作的对象,而creatChild就是对child进行改变的一个开关,相当于调用了一个creatChild的方法。
我们只需要传递改变后的child,底层就帮我们实现了按照我们新传递的child去改变界面,从而实现数据改变,界面就跟着改变的效果。

3.3.1.输入框的创建和修改代码实现功能

      if(child.childId) { // 修改重生
         let childIndex = childList.findIndex((p) => p.childId == child.childId)
          childList[childIndex]= _.clone(child)
          setChildList(childList)
        }
        else { // 简单创建
          child.childId = new Date().getTime();
          childList.unshift(_.clone(child))
          setChildList(childList)
        }
        // 这里必须要调用一次 creatChild不然数据不会显示到列表中
        // creatChild(_.clone(child))
        creatChild({childName:null,childAge:null,childId:null,childSchool:null})
        console.log("save-childList",childList)

3.3.2.每条孩子信息删除和修改代码实现功能

          <button onClick={()=>{
              // 这里必须把所有属性写全乎了,或者修改部分的话,就用...语法
              creatChild({childName:item.childName,childAge:item.childAge,childSchool:item.childSchool,childId:item.childId})

            }}>不满意-重生</button>

            <button onClick={()=>{
              let tempChildList = childList.filter((p) => p.childId != item.childId)
              console.log("tempChildList",tempChildList)
              setChildList(tempChildList)
            }}>打掉-再来</button>

最后放上一个本篇中通过useState方式实现的效果展示:


useState的简单增删改使用.gif

具体代码实现详见地址为:我的userState和MobX简单实现Demo
最后,有什么问题,咱们评论区见哈!

推荐阅读更多精彩内容