React函数式组件之useState用法

自React版本16.8之后，

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

目录：

一.React安装相关

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

1.1.React基本介绍

1.2.安装Node和npm

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

2.我们的第一个React程序

二.userState功能展示说明

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

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

3.useState代码实现说明

一.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中创建项目名称中不能有大写字母，不然会报如下错误

 

2.我们的第一个React程序

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

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

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

 通过该命令创建的**React**程序支持**ts**语法，关于**ts**的比**js**到底多了哪些功能，详细可参考这篇文章：

[TypeScript超详细入门教程（上）](https://blog.csdn.net/Aria_Miazzy/article/details/105641241)

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

二.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方式实现的效果展示:

 

具体代码实现详见地址为：[我的userState和MobX简单实现Demo](https://gitee.com/httpfdajkfihdakdjhd/dd-my-user-state-mob-x)
最后，有什么问题，咱们评论区见哈！