自React版本16.8之后，
增加了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中创建项目名称中不能有大写字母，不然会报如下错误
2.我们的第一个React程序
我们创建第一个React程序最好采用如下的方式，即为
npx create-react-app hello-world --template typescript
之后按照提示分别执行上图中的2个命令
cd hello-world
yarn start
之后我们的第一个React项目就显示在眼前，如下所示：
通过该命令创建的React程序支持ts语法，关于ts的比js到底多了哪些功能，详细可参考这篇文章：TypeScript超详细入门教程（上）
这里汇总下，简单来说，通过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
最后，有什么问题，咱们评论区见哈！
